web-dev-qa-db-ja.com

ブラウザーがネイティブプレースホルダー属性をサポートしているかどうかをテストする方法は？

私のサイト用の簡単なプレースホルダーjQueryプラグインを作成しようとしていますが、もちろん、ネイティブプレースホルダー属性がサポートされていない場合にのみ関数を起動したいと思います…

jQueryを使用してプレースホルダー属性のネイティブサポートをテストするにはどうすればよいですか？

jqueryhtmltestingplaceholder
47
Jannis

$.support に追加するには、作成したJavascriptの上部にこれを挿入します。

jQuery.support.placeholder = (function(){
    var i = document.createElement('input');
    return 'placeholder' in i;
})();

その後、コードの任意の場所で$.support.placeholderまたはjQuery.support.placeholderを使用できます。

注意：このコードは、上記のhellvinzによって提供されるリンク diveintohtml5 から変更されました。

93
lonesomeday

ここにあるModernizrライブラリを使用してください： http://www.modernizr.com/

そして、これを行います：

if (Modernizr.input.placeholder) {
  // your placeholder text should already be visible!
} else {
  // no placeholder support :(
  // fall back to a scripted solution
}

Modernizrは、ほとんどすべてのHTML5機能に対するブラウザーのサポートをテストするのに本当に便利です。

15
Ender

こんな簡単なクラスが好きです...

var Browser = {
  Can: {
    Placeholder: function () {
      return 'placeholder' in document.createElement('input'); 
    }
  }
}

...ブラウザーがプレースホルダー属性をサポートしているかどうかを簡単に確認できます。

if (Browser.Can.Placeholder()) {

}
4
WoIIe

placeholderプロパティは、HTMLのINPUT要素でプレースホルダー属性が定義されているかどうかに関係なく、すべてのブラウザーのINPUT DOMオブジェクトに存在します。

正しい方法は次のとおりです。

var Modernizr = {};
// Create the input element for various Web Forms feature tests.
var inputElem = document.createElement('input'), attrs = {};    
Modernizr.input = (function(props) {
    for(var i = 0, len = props.length; i < len; i++) {
        attrs[props[i]] = props[i] in inputElem;
    }
    return attrs;
})('autocomplete autofocus list placeholder max min multiple pattern required step'.split(' '));

if(!Modernizr.input.placeholder) {
    // Do something.
}
3
Aleksey Kolesnik