ブラウザがネイティブプレースホルダー属性をサポートするかどうかをテストする方法は?
-
30-09-2019 - |
質問
私は私のサイトのためにシンプルなプレースホルダーjQueryプラグインを書き込もうとしていますが、もちろん、ネイティブのプレースホルダー属性がサポートされていない場合にのみ機能を発射したいのですが…
jqueryを使用して、プレースホルダー属性のネイティブサポートをテストするにはどうすればよいですか?
解決
追加できます $.support
あなたが書いたJavaScriptの上部にこれを挿入することで非常に簡単に:
jQuery.support.placeholder = (function(){
var i = document.createElement('input');
return 'placeholder' in i;
})();
その後、どちらも使用できます $.support.placeholder
また jQuery.support.placeholder
コードのどこにでも。
NBこのコードはから適応しました diveintohtml5, 、上記のHellvinzが提供するリンク。
他のヒント
ここで見つけることができる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機能に対するブラウザのサポートをテストするのに非常に便利です。
私はそのようなシンプルなクラスを持っているのが好きです...
var Browser = {
Can: {
Placeholder: function () {
return 'placeholder' in document.createElement('input');
}
}
}
...したがって、ブラウザがプレースホルダー属性をサポートしているかどうかを簡単に確認できます。
if (Browser.Can.Placeholder()) {
}
placeholder
プロパティは、プレースホルダー属性がHTML入力要素で定義されているかどうかに関係なく、すべてのブラウザーの入力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.
}
所属していません StackOverflow