Làm cách nào để biết liệu loại màu đầu vào HTML5 có sẵn dưới dạng bộ chọn màu không?

Question

Tôi muốn thêm dự phòng bộ chọn màu jquery nếu không có bộ chọn màu nào được hiển thị. Ví dụ: chrome hiển thị bộ chọn màu, nhưng vào lúc này, safari chỉ hiển thị một trường văn bản. Có cách nào (không có tác nhân người dùng) để phát hiện xem bộ chọn màu có khả dụng không?

Chỉnh sửa: Modernizr không tốt, vì nó chỉ nói rằng safari cũng hỗ trợ nó. Safari hỗ trợ kiểu đầu vào màu vì nó không cho phép bất cứ điều gì ngoài màu #hex được nhập vào hộp nhập liệu. Nhưng không có bộ chọn màu. Tôi cần phải biết nếu có một bảng chọn màu thay vào đó.

Answer 1

Đây.

/** 
 
* Determine if the current browser has support for HTML5 input type of color. 
 
* @author Matthew Toledo 
 
* @return {boolean} True if color input type suppored. False if not. 
 
*/ 
 
var test = function() { 
 
    var colorInput; 
 

 
    // NOTE: 
 
    // 
 
    // If the browser is capable of displaying a color picker, it will sanitize the color value first. So "!"" becomes #000000; 
 
    // 
 
    // Taken directly from modernizr: 
 
    // @see http://modernizr.com/docs/#features-html5 
 
    // 
 
    // These types can enable native datepickers, colorpickers, URL validation, and so on. 
 
    // If a browser doesn’t support a given type, it will be rendered as a text field. Modernizr 
 
    // cannot detect that date inputs create a datepicker, the color input create a colorpicker, 
 
    // and so on—it will detect that the input values are sanitized based on the spec. In the 
 
    // case of WebKit, we have received confirmation that sanitization will not be added without 
 
    // the UI widgets being in place. 
 
    colorInput = $('<input type="color" value="!" />')[0]; 
 
    return colorInput.type === 'color' && colorInput.value !== '!'; 
 
}; 
 

 
$(function(){ 
 
    if (test()) { 
 
    $('body').append('<p1>Your browser supports the color input</p>'); 
 
    } else { 
 
    $('body').append('<p>Your browser Doesn\'t Support the color input</p>'); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Answer 2

Bạn có thể phát hiện các tính năng HMTL5 bằng cách sử dụng Modernizr.js và thêm các khoản hoàn vốn.

Dưới đây là phần giới thiệu ngắn về cách sử dụng Modernizr.

http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/

Answer 3

Để kiểm tra sự hỗ trợ của bất kỳ tính năng của HTML3 hoặc CSS3 trên mọi trình duyệt, bạn có thể sử dụng Modernizr.

Mã cho ColorPicker sẽ là:

if(!Modernizr.inputtypes.color){ 
    // your fall back goes here 
} 

Đối Modernizr tất cả các bạn phải làm là để thêm một liên kết của Modernizr trên trang web của bạn.

Chạy bản demo cho cùng, bạn có thể kiểm tra tại nettuts:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

Hy vọng điều này sẽ giúp bạn.

Xin cảm ơn, NS