12

カラーピッカーが表示されない場合は、jqueryカラーピッカーフォールバックを追加したいと思います。たとえば、chromeはカラーピッカーを示していますが、現時点では、safariは単にテキストフィールドを示しています。カラーピッカーが利用可能かどうかを（ユーザーエージェントなしで）検出する方法はありますか？

編集：Safariもそれをサポートしていると言うだけなので、Modernizrは良くありません。Safariは、入力ボックスに#hex色以外を入力できないため、入力タイプの色をサポートしています。しかし、カラーピッカーはありません。代わりにカラーピッカーがあるかどうかを知る必要があります。

4

5 に答える 5

5

どうぞ。

/**
 * Determine if the current browser has support for HTML5 input type of color.
 * @author Matthew Toledo
 * @return {boolean} True if color input type supported. 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>

于 2015-10-12T20:36:23.537 に答える
3

任意のブラウザでHTML3またはCSS3の機能のサポートを確認するには、modernizrを使用できます。

カラーピッカーのコードは次のようになります。

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

modernizrの場合、あなたがしなければならないのはあなたのウェブページにmodernizrのリンクを追加することだけです。

同じもののデモを実行すると、nettutsで確認できます。

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

これがお役に立てば幸いです。

ありがとう、NS

于 2012-12-09T16:31:57.493 に答える
3

再びjQueryなし

const hasColorInputSupport = (document) => {
    try {
        const input = document.createElement('input');
        input.type = 'color';
        input.value = '!';
        return input.type === 'color' && input.value !== '!';
    } catch (e) {
        return false;
    };
};
于 2018-07-04T07:42:50.253 に答える
1

Modernizr.jsを使用してHMTL5機能を検出し、フォールバックを追加することもできます。

これは、Modernizrの使用に関する簡単な紹介です。

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

于 2012-12-09T16:16:58.807 に答える
1

カラーウェルを使用したカラー入力では、存在しないテキストを選択することはできません。したがって、selectionStartプロパティまたはselectionEndプロパティはありません。

これは、コントロールに16進コード以外のものを含めることができないことをチェックするだけのModernizrチェックよりも便利なチェックだと思います。

Safari 12、Chrome 69、Firefox 62、Internet Explorer 11、およびEdge17でテスト済み。

編集：このメソッドは、Safari12.1のカラーピッカーのサポートを取得しません。提案された修正は大歓迎です。

var supportsColor = true;

try {
  var a = document.createElement("input");
  a.type = "color";
  supportsColor = a.type === "color" && typeof a.selectionStart !== "number";
} catch (e) {
  supportsColor = false;
}

document.getElementsByTagName("output")[0].innerText = supportsColor.toString();
Supports color input with color picker: <output></output>

<input type="color"/>

于 2018-09-20T11:20:21.737 に答える