HTML5で定義されたinput typeを機能検出する術

web tip

こんにちは。うさぎ(http://tabelog.com/tokyo/A1303/A130301/13041115/)は良いものです。

HTML5では、これまでのtext, passwordの他にmonth, color, emailなどのinput typeを定義しています。 この指定により、特にスマートフォンサイトでは、ブラウザが適切なキーボードを表示してくれるので、これまでよりも入力がしやすくなります。

ですが、これらはサポートしているブラウザがまちまちなケースもあるので( refs: Can I use... Support tables for HTML5, CSS3, etc )、機能検出をして、もし利用できない場合は、代替手段を提供したいケースもあるでしょう。

今回は、その機能検出をどうやるのかという話。

機能検出する方法

var i = document.createElement("input");
i.setAttribute("type", "month");
i.type !== "text"; // trueならば type="month" がサポートされている

サポートされていないブラウザでは、setAttributeで属性を変更しようとしてもフォールバックしてtextのままなので、その挙動を利用します。