type=rangeとchangeイベントまわりで遊んでみたらいろいろバグっぽい挙動に出くわしたたまには、みんな大好きJavaScriptなエントリーでも書いてみようかなって。そもそもJSの書き方がわかんないので適当にぐぐってみたらこういうコードが出てきた。YoheiM技術やらずに終われまテンtype属性いらない、innerHTML使うべからず、イベントハンドラコンテンツ属性よりイベントリスナーっしょ、みたいな声が聞こえてきそうなので、ついでに少し盛って書き直してみた。id="scale"><option>0</option><option>50</option><option>100</option></datalist>まあ、やってることはそんなに高尚なことではなく、単にスライダーの指示値をinput要素の横に表示するというだけのごく簡単なもの。はずなのだけど、なぜかバグっぽい差異がいろいろと見受けられる。(Vivaldi)でこういう感じで目盛りが表示されるのだけれども、Firefoxでは表示されない(HTML仕様で目盛りの表示は示唆されている)*1。IE/Edgeで、キーボードで右(または左)に連続してスライドさせていくと、数値がstepに従わなくなるたとえば0からはじめて右にずっと移動させていくと、数値が下記のようになる。キーボードでつまみをスライドさせても、Firefoxではspan要素の値が更新されないどうも、Firefoxではイベントが発火しないみたい。/>とかすると、次の図のようになる*3。1)と2)はバグの疑いが濃厚だけれども、3)と4)はどうなのか。仕様のchangeイベントを当たってみよう。behaviours仮訳:(ボタン以外のすべてのinputコントロールおよび非表示状態でtype属性をもつ場合に)inputおよびchangeが適用される際、イベントは、ユーザーがコントロールと相互作用したことを示すために発火される。inputイベントはユーザーがコントロールのデータを変更するたびに発火する。changeイベントがコントロールに対して理にかなう場合、値がコミットされた際に、あるいはそのコントロールがフォーカスを失った際に、そのイベントは発火する。すべての場合において、inputイベントは、対応するchangeイベントの前に来る(もしあれば)。*4ということらしい。実装の差異と取るべきなのかというのがいまいち判断付かないけども。ここで、changeイベントの代わりに「データを変更するたびにいつでも発火する」というinputイベントとすると、IEでは思い通りに動かない(Edgeはちゃんと動く)。Firefoxでマウスとキーボードの挙動の違いはなくなった。changeイベントが鬼門と言うことなのか......というか素人目になんでもかんでも発火してそうなinputイベントを使うのは妥当なのだろうか、まるでこのあたり分かってない。Events仕様にinputイベントが定義されているとあるけれども、見つけることができなかった。Events仕様でもやっぱり定義されていない。なっているの......。(Chrome/45.0.2454.99)。類似のバグレポが投げられていたのでコメントを付けたけど、これで良かったのだろうか、、。