input typeのブラウザ対応確認

HTML5ではinput typeにdate, colorなど様々な形式を入力できるようになったが、ブラウザの対応状況はまだバラつきがある。サポートされていなければtextと同じ扱いになるので、補助入力機能が必要になったり、デフォルト幅やデザインも変わってくる。

javascriptから判定するには、以下のようにする。

var inputTypeCheck = function() {
    // dateをチェックする例
    var el = document.createElement('input');
    el.setAttribute('type', 'date');
    el.value = 'aaa'; // NG value
    if (el.value === '') {
        // Supported
    } else {
        // Not Supported
    }
}

dateは日付形式の入力しか受け付けない。あえて形式から外れた値を入れると、正しく機能していれば空文字列になるため、判別できる。他にもdatetime, datetime-local, month, week, time, number, range, colorなどが使えるだろう。

tel, emailなどは、正しく機能していても値のバリデーションがブラウザによって異なり、この方法は使いづらい。

setAttributeした後、そのままtypeを確認する例もあるが、

    // ...
    el.setAttribute('type', 'date');
    if (el.type === 'date') {
        // Supported
    } else {
        // Not Supported
    }

確かにChromeではdate, Firefoxではtextとなり判定できそうだったが、Android Browser(4.2.2)ではdateとなっているのに挙動はtextの様になる例もあり、上の方が確実かな？

Android Browserは開発終了してるが、まだ普通に使われている可能性がある。古いアンドロイド、標準の「ブラウザ」から乗り換えを｜タブロイド｜オトコをアゲるスマホニュース

参考

JavaScript - ブラウザが`<input type="color">`に対応しているか判別する - Qiita