2009-11-01 8 views
11

<input type="date" />jQueryを使用した特定のHTML 5機能のサポートの検出

これは現時点ではOpera 10で正しく動作しますが、他のすべてのブラウザは通常のテキスト入力を表示します。私はそれをサポートしていないブラウザでこの動作を無効にするためにjQuery.date-inputプラグインを使用しています。

問題は - jQueryがOperaでも動作しているので、Operaでは2つのカレンダーの日付ピッカー(ブラウザから1つ、jQueryから1つ)を取得しています。

if (window.opera) jQuery.supportを使って、現在のブラウザが特定のHTML5機能をサポートしているかどうかを確実に検出できる方法がありますか?

答えて

17

Modernizrをご覧ください。オープンソースのMITでライセンスされたJavascriptライブラリで、多くのHTML5/CSS3機能のサポートを検出しています。本当に小さく(7kb圧縮されています)。それを使用するには、簡単に:

<script src="modernizr.min.js"></script> 

文書の<head>の範囲内です。その後、必要なものを確認するためのさまざまな機能があります。例:

if (Modernizr.canvas) { 
    // do stuff 
} 

具体的なHTML5/CSS3機能を確認するには、さらに多くの方法があります。 Check out their websiteを入手してドキュメントをご覧ください。

+0

これはいくつか拡張されましたが、MSIEはタイプが理解できないものに設定されていると、扱いにくいものになります。 @bobinceのソリューションがうまく動作します。 –

11

ええ、特定のブラウザを確認することは、まったく欲しいものではありません。ブラウザのバグ(通常はIE)の回避策を適用する必要があるときを検出するのに、ブラウザがその機能を狙っているかどうかを知りたければ、時には便利です。

いくつかのものは他のものよりも盗聴するのが簡単です。あなたの日付入力サポートの例は、とても簡単です。 input.typeプロパティは、ブラウザがどの種類のコントロールを認識しているかを示します。日付入力がサポートされていない場合は、'text'が得られます。

<input type="date" class="dateinput" /> 

if ($('.dateinput')[0].type!=='date') { 
    $('.dateinput').addSomeDateScriptingPluginThing(); 
} 
関連する問題