カラーピッカーが表示されていない場合、jqueryカラーピッカーのフォールバックを追加したいと思います。たとえば、クロムはカラーピッカーを示しますが、まだサファリはテキストフィールドを表示しています。カラーピッカーが利用可能かどうかを検出する方法はありますか？HTML5入力タイプのカラーがカラーピッカーとして利用可能かどうかを知る方法？
編集：Modernizrは、サファリがそれをサポートしていると言えるので、いいです。入力ボックスに#hex色以外の入力を許可しないため、Safariは入力色をサポートしています。しかし、カラーピッカーはありません。代わりにカラーピッカーがあるかどうかを知る必要があります。
あなたが行きます。
/**
* 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>Modernizr.jsを使用してHMTL5機能を検出し、フォールバックも追加できます。
ここでは、Modernizrの使用について簡単に紹介します。
http://html5doctor.com/using-modernizr-to-detect-html5-features-and-provide-fallbacks/
私はmodernizrのソースを調べましたが、それは単にサファリもそれをサポートしていると言います。 Safariは、入力ボックスに#hex色以外の何も入力できないため、これをサポートしています。しかし、カラーピッカーはありません。代わりにカラーピッカーがあるかどうかを知る必要があります。 – Wesley
あなたはmodernizrを使用することができます任意のブラウザ上HTML3やCSS3のいずれかの機能のサポートを確認します。
ColorPickerのためのコードは次のようになります。
modernizrについてはif(!Modernizr.inputtypes.color){
// your fall back goes here
}
あなたがしなければならないすべてはあなたのウェブページ上のmodernizrのリンクを追加することです。あなたはnettutsでチェックすることができ、同じのデモ走行
：
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/
が、これはあなたを助けることを願っています。
おかげで、 NSここ
あなたは[Modernizr]（http://modernizr.com/）ライブラリを使用することができます。 – undefined
ちょうどそれについて言います。あなたは私にそれを打つ。 –
下記のご意見があれば、これは良い質問です。 –