ど素人から毛を生やす。<延>

ステップ操作のトリガー扱いにブラウザ差異があるのでinput[type=number]を使う際は注意。

Web > javascript 2018年3月2日(最終更新:5年前)

2018年3月2日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。
最近フォーム回りとSQLの話しかしてない気がする。

input[type=number]のフォーム操作について。

入力の数値に変更があった場合は再計算、という簡単なソースを作成したのですが、
Chromeでは正常に動いたのにFireFoxでは上手くいかず。

この原因が、トリガーにonBlurを使用したことでした。
どうやらChromeでは入力欄の上下矢印(ステップ)の操作はフォーカスが当たった扱いになるのですが、FireFoxではそうならないようです。

今回は矢印で操作したいので、onChangeに変更。

うーん、ブラウザ差異は発覚しにくいから厄介だ。(-_-メ)

onChange、発火したりしなかったりするよ!?(追記)

検証結果:
FF→発火する
Chrome→発火したりしなかったりする(3回に1回くらい発火する)
edge→発火しない
IE11→発火しない

いや、Chromeおかしいだろ!?したりしなかったりって何だよ!?

それはともかく、調べてみたところこちら(stack overflowの一記事)がこの問題にクリティカルヒット。

取り敢えずjQuery使えるなら下記のように書いておけば、一通りのブラウザでOK、のよう。
一応検証してみたが、上記4ブラウザで想定通りの動作を確認。


$(":input").on('keyup mouseup', function () {
	alert("changed");            
});

//あるいは、
$(document).on("keyup mouseup", ":input", function (){
	alert("changed");            
});

なんでじゃぁ…( ゚Д゚)

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)