には、ブラウザのHTML機能の可用性を検出する方法があります。

Question

ブラウザで次のhtml5またはcss 3機能を使用できる場合は、javascriptで検出する方法はありますか？

例えば、私は属性を持っている：プレースホルダ、

<input type="text" placeholder="type your email address" /> 

を私はプレースホルダー属性はブラウザ

---

によってサポートされていない場合は、手動プレースホルダを設定しますjavascript関数を設定私はModernizrを使用している場合、これはどうなる：

if (Modernizr.testProp('placeholder')) 
// add attribute placeholder 
else 
// assign a keypress event as placefolder 

Answer 1

のために、あなたはModernizrを介さずに直接に物事を行うことができます。

<input type="text" placeholder="type your email address" 
    id="email"> 
<script>  
var email = document.getElementById('email'); 
if(!('placeholder' in email)) { 
    email.value = email.getAttribute('placeholder'); 
    email.onfocus = function() { this.value = ''; }; 
} 
</script> 

このアプローチでは、placeholder属性は、静的なHTMLマークアップで表示されます。サポートされていない場合でも問題ありません。実際には、サポートされていない場合でも役に立つことがあります。

placeholderがサポートされている場合、その名前のプロパティが要素ノード用に存在します。サポートされていない場合でも、ブラウザはそれを解析して保存しているので、getAttribute()で取得し、valueプロパティに値を割り当てて、初期コンテンツとして表示させることができます。

フォーカスを合わせるとコードがフィールドをクリアします。ユーザーがデータの一部を入力した後、いくつかの理由でフィールドをクリックする可能性があるため、このボタンをクリックするたびにクリアするよりも音がよくなります。

P.S.ユーザビリティ、アクセシビリティ、およびシンプルさを考慮して、プレースホルダを使用する代わりに、すべての入力フィールドに目に見えるラベルを使用する方がよいでしょう。だから、これは良いユースケースを好きではありません。しかし、同じ技術を使用することができる。サイトがしばしばサイト全体のナビゲーションシステムの一部として持つ非常に単純な検索フォーム。そこでは、ラベルを省略して、非常に小さいサイズにフォームを絞ることが理にかなっています。

Answer 2

使用Modernizrこのような単純な場合には、すべての機能検出ニーズ