どもです。
最近フォーム回りと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");
});
なんでじゃぁ…( ゚Д゚)