html5 inputのtype(date、colorなど)が対応しているブラウザかどうかjavascriptで判定する
html
のinput
はtext
やpassword
だけではなく、最近はdate
(カレンダーで日付を設定)やcolor
(カラーピッカーで色を設定)など、便利なコントロールが用意されています。
しかし、対応していないブラウザの場合は普通のテキストボックスinput type="text"
になってしまいます。
使用しているブラウザが対応しているかどうかをjavascript
で判定し、処理を分岐したい場合は、以下のように実装します。
function checkSupport (type) {
var obj = document.createElement('input');
obj.setAttribute('type', type);
return obj.type != 'text';
};
// 例
// input type="color"が対応しているかどうか
if (checkSupport('color')) {
// 対応している
} else {
// 対応していない
}
type
を指定した時に、対応していないブラウザの場合は問答無用にtext
になるようなので、これを利用して判定しています。 もしかしたらブラウザによってはうまく行かないかもしれませんのでご注意ください。(IE11、FireFoxでは確認済み)