JavaScriptのonChangeでalertを出すと次にフォーカスを当てたオブジェクトのonChangeが動作しない

JavaScriptのonChangeでalertを出すと次のオブジェクトのonChangeが動かない、と言う話が出てきて、簡易的に下記コードを試してみました。

html
1<html>
2    <body>
3        <form>
4            <input id="tt1" type="text" value="0" onchange="alert('A');">
5            <input id="tt2" type="text" value="0" onchange="alert('B');">
6            <input id="tt3" type="text" value="1">
7        </form>
8    </body>
9</html>

簡易的に試しのために書いたので、w3cに準拠していないのはご容赦ください。
ここでtt1に値を入力してtt2にフォーカスを移すとalertとして「A」が出てくるのですが、その状態でtt2に値を入れてtt3にフォーカスを移しても出てきてほしいalert「B」が出てきません。
これがtt1→tt3→tt2→tt1であればそれぞれのalertが出てきます。

この現象がIE11では発生せず(tt1→tt2→tt3であってもそれぞれのalert出現)、Edge、FireFoxで現象が発生していると言う状態です。

解消方法があればご教授いただければと思います。

行動規範の内容に同意します

回答1件

ベストアンサー

onchangeでalertを出す必要があるかまず検討すべきですが
現象自体はsetTimeoutなど噛ませば回避できそうですね
(検証は不十分ですがテストした範囲ではFirefox/Edgeではいけてる感じです)

HTML
1<form>
2<input id="tt1" type="text" value="0" onchange="setTimeout(function(){alert('A')},0);">
3<input id="tt2" type="text" value="0" onchange="setTimeout(function(){alert('B')},0);">
4<input id="tt3" type="text" value="1">
5</form>
6

投稿2021/11/29 02:37