2013-04-10 2 views
5

フォームに<input type="range">コントロールを配置した場合、一部のブラウザではスライダコントロールが(正しく)レンダリングされ、他のユーザーはテキストボックスを代わりにレンダリングすることはありません(range)。このケースを処理するには、テキストボックスに任意のテキストを含めることができるため、追加の検証が必要です。私がページに入れて「DOMでこのコントロールを見てください。それがテキストボックスコントロールなら、foo()を実行してください」というJavaScriptはありますか?このsite recommends using ModernizerHTML5入力コントロールがサポートされているかどうかを検出するにはどうすればよいですか?

+0

可能重複[チェックする方法、HTML5の入力がサポートされている場合は?](http://stackoverflow.com/questions/8278670/how-to-check-if-a-html5-input-isサポートされています) – Mathletics

答えて

9

:HTML5の入力タイプのチェック

は検出技術#4を使用しています。まず、ダミーの<input>要素をメモリに作成します。すべての<input>要素のデフォルトの入力タイプは "text"です。これは非常に重要であることがわかります。

var i = document.createElement("input"); 

次に、ダミー要素のtype属性を検出する入力タイプに設定します。

i.setAttribute("type", "color"); 

ブラウザがその特定の入力タイプをサポートしている場合、タイププロパティは設定した値を保持します。ブラウザがその特定の入力タイプをサポートしていない場合は、設定した値は無視され、typeプロパティは引き続き「テキスト」になります。

return i.type !== "text"; 

代わりの13機の別々の機能を自分で書いて、あなたはHTML5で定義されたすべての新しい入力タイプのサポートを検出するために、Modernizrを使用することができます。 Modernizrは、単一の<input>要素を再利用して、13種類の入力タイプすべてのサポートを効率的に検出します。 Modernizr.inputtypesと呼ばれる13個のキー(HTML5タイプの属性)と13個のブール値(サポートされている場合はtrue、そうでない場合はfalse)を含むハッシュを作成します。

//check for native date picker 
if (!Modernizr.inputtypes.date) { 
    // no native support for <input type="date"> :(
    // maybe build one yourself with Dojo or jQueryUI 
} 
+0

HTML 5 shim ...を誤ったHTML 5 shivでチェックアウトしてください。 – ErikE

関連する問題