Cách phát hiện xem có hỗ trợ điều khiển đầu vào HTML5 không?

Question

Nếu tôi đặt một điều khiển <input type="range"> trên biểu mẫu, một số trình duyệt sẽ (chính xác) hiển thị điều khiển thanh trượt và một số khác sẽ không biết nội dung range là gì và sẽ hiển thị hộp văn bản thay thế. Xử lý trường hợp này sẽ yêu cầu xác nhận thêm, vì một hộp văn bản có thể chứa bất kỳ văn bản tùy ý nào. Có JavaScript nào tôi có thể đưa vào trang để nói "nhìn vào điều khiển này trong DOM và nếu đó là điều khiển hộp văn bản, hãy foo()"?

Answer 1

Điều này site recommends using Modernizer:

Kiểm tra loại đầu vào HTML5 sử dụng kỹ thuật phát hiện # 4. Đầu tiên, bạn tạo một phần tử giả <input> trong bộ nhớ. Kiểu đầu vào mặc định cho tất cả các thành phần <input> là "văn bản". Điều này sẽ chứng minh là cực kỳ quan trọng.

var i = document.createElement("input"); 

Tiếp theo, đặt thuộc tính type trên phần tử giả thành loại đầu vào bạn muốn phát hiện.

i.setAttribute("type", "color"); 

Nếu trình duyệt của bạn hỗ trợ kiểu nhập cụ thể đó, thuộc tính type sẽ giữ lại giá trị bạn đã đặt. Nếu trình duyệt của bạn không hỗ trợ loại đầu vào cụ thể đó, nó sẽ bỏ qua giá trị bạn đã đặt và thuộc tính type sẽ vẫn là "văn bản".

return i.type !== "text"; 

Thay vì tự viết 13 hàm riêng biệt, bạn có thể sử dụng Modernizr để phát hiện hỗ trợ cho tất cả các kiểu nhập mới được xác định trong HTML5. Modernizr sử dụng lại một phần tử <input> để phát hiện có hiệu quả hỗ trợ cho tất cả 13 loại đầu vào. Sau đó, nó xây dựng một băm gọi là Modernizr.inputtypes, có chứa 13 khóa (thuộc tính kiểu HTML5) và 13 giá trị Boolean (true nếu được hỗ trợ, false nếu không).

//check for native date picker 
if (!Modernizr.inputtypes.date) { 
    // no native support for <input type="date"> :(
    // maybe build one yourself with Dojo or jQueryUI 
}