input type=”slider”に対応したブラウザか否かに応じて処理を分岐したい


現在、input type="slider"とするとスライダーを使えるブラウザ(Chrome,Safari,Operaなど)と使えないブラウザ(IE,FireFoxなど)を判別し、

それぞれに最適化された表示となるよう切り替えたいというケースがあります(私はありました)

そういった場合、navigator.userAgentの内容によりブラウザで判定してしまうと、将来的に例えばFireFoxにinput type="slider" が実装されたりした場合にもったいないです。

ベストな方法はinput type="slider"が使えるか否かでの分岐です。

次のような構文で判別可能です。

1. input要素をJSで作る

2. 1で作った要素にtype属性"slider"を追加する

3.sliderに対応しないブラウザではtype属性にtextが代替される

4.この要素のinput type="slider"かinput type="text"かを調べる

具体的にはこんな感じです。


$(function(){
var i = document.createElement("input");
i.setAttribute("type", "range");
var rangeNotSupported = (i.type === "text");
delete i;
if(rangeNotSupported) {
alert('残念ながら、お使いのブラウザは、スライダーが使えませんので、テキストで表示します');
}
else {
alert('お使いのブラウザは、スライダーが使えますよぉ!!!ぐりぐり動かしちゃってください');
}
});

サンプルはこちら

http://jsdo.it/dentaq/bIIk