2009-11-01 28 views
11

Tôi đang làm việc trên một số code demo HTML5, bao gồm những thứ như <input type="date" />Phát hiện hỗ trợ cho HTML cụ thể 5 tính năng thông qua jQuery

này hiện đang hoạt động một cách chính xác trong Opera 10 như nó vốn có, nhưng mọi trình duyệt khác chỉ hiển thị một văn bản bình thường đầu vào. Sau đó tôi sử dụng một plugin jQuery.date-input để ghi đè hành vi này trên các trình duyệt không hỗ trợ nó.

Vấn đề là - chạy của jQuery trên Opera là tốt, vì vậy trong Opera Tôi nhận được hai lịch ngày hái (một từ trình duyệt, một từ jQuery)

tôi có thể làm việc xung quanh này cho bây giờ sử dụng if (window.opera) - nhưng có một số cách sử dụng, nói, jQuery.support, rằng tôi có thể đáng tin cậy phát hiện xem trình duyệt hiện tại có hỗ trợ một tính năng HTML5 cụ thể hay không?

Trả lời

17

Tôi sẽ xem Modernizr. Đây là một thư viện Javascript có mã nguồn mở, được MIT cấp phép phát hiện hỗ trợ cho nhiều tính năng HTML5/CSS3 và nó thực sự rất nhỏ (nén 7kb). Để sử dụng, chỉ cần:

<script src="modernizr.min.js"></script> 

Trong tài liệu <head> của tài liệu của bạn. Sau đó, nó có nhiều chức năng để kiểm tra những gì bạn cần. Ví dụ:

if (Modernizr.canvas) { 
    // do stuff 
} 

Có nhiều cách khác để kiểm tra tính năng HTML5/CSS3 cụ thể mà bạn muốn. Check out their website để tải xuống và xem tài liệu.

+0

làm việc này để mở rộng, nhưng MSIE làm những điều khó xử khi loại được đặt thành thứ gì đó không thể hiểu được. giải pháp của @bobince hoạt động tốt hơn. –

11

Vâng, việc kiểm tra một trình duyệt cụ thể không phải là điều bạn muốn. Đôi khi nó hữu ích khi phát hiện khi bạn cần áp dụng cách giải quyết cho các lỗi trình duyệt (thường là với IE), nhưng nếu bạn muốn biết liệu một trình duyệt có hỗ trợ một tính năng nào đó hay không.

Một số điều dễ bị ngửi hơn những người khác. Ví dụ về hỗ trợ ngày-đầu vào của bạn rất dễ dàng. Thuộc tính input.type cho bạn biết loại trình điều khiển mà trình duyệt nghĩ là gì; nếu đầu vào ngày không được hỗ trợ, bạn sẽ nhận được 'text'.

<input type="date" class="dateinput" /> 

if ($('.dateinput')[0].type!=='date') { 
    $('.dateinput').addSomeDateScriptingPluginThing(); 
} 
Các vấn đề liên quan