HTML5のinput-typeをProgressive Enhancement的に使えるようにする

やりたかったのは、INPUT-TYPEを動的に変えること

HTML5でINPUT-TYPEが13種類も増えました。が、対応しているのはブラウザによって全然違います。「type=email」とか「type=url」なんて普通に使いたいのに、古いIEには対応していないので泣く泣く使わずにお茶を濁してしまうことって、よくあります。
そこで思いました。「input-typeを動的に変えればいいんじゃね?」
で、試してみました。が、IEではtype属性を動的に変えるとエラーが出ます。jQueryでも「attr(“type”,”hoge”)」なんてやると例外エラーが出ます。なので、やっぱりIEがアホなせいでダメじゃん、と思った矢先、「逆に使えるブラウザだけ使えばいい」と思い直しました。


IEのことなんてほっといて、モダンブラウザだけリッチなHTML5体験を利用できるという考え方。それがいわゆる「Progressive Enhancement(プログレッシブ・エンハンスメント)」です。
そこで、まずはinput要素は全部textにすることにしました。そのかわり、HTML5inputを使いたい項目だけ「data-*」属性を使って、本来指定したいtype属性名を入れておきます。さらにModernizrを使ってブラウザのinput-type対応状況を調べ、有効だったら動的に書き換えるという処理を試してみました。
そうすると予想通り、「対応しているブラウザのみHTML5-input-typeを使える!」といういい具合に着地できました。
試した結果がこちら。IE8以下が爆発したらこんなスクリプトは不要になります。