omachizura

仕事メモ、役に立ったスキルをまとめています。


html5 inputのtype(date、colorなど)が対応しているブラウザかどうかjavascriptで判定する

htmlのinputはtextpasswordだけではなく、最近は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では確認済み)