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

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

Web > javascript 2018年3月2日(最終更新: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)