jQuery 按键绑定仅在 Visual Studio 调试器中设置断点时有效

Question

我认为一定存在竞争条件，但不知道如何解决。

我有几个 INPUT 排成一排，每个 INPUT 的最大长度都为 1，我想在用户键入字母时在其中移动：

      /* jQuery 3.6.0 */
      $("input").bind("keypress", function (e) {
            if (/[A-Z]/i.test(e.key)) {
              /* breakpoint on this next line */
                $(this).next('input').focus();  
            }
        });

如果我按指示在行上放置断点，调试器会按预期停在那里，如果我按 [F5] 继续，焦点确实会前进到下一个 INPUT。但是如果我去掉断点，运行程序正常，焦点不会前进。

Answer 1

你遇到的问题是事件的动作和焦点存在竞争条件。你可以通过超时来绕过它

$("input").bind("keypress", function(e) {
  if (/[A-Z]/i.test(e.key)) {
    window.setTimeout(() => $(this).next('input').focus(), 0);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />

jQuery 按键绑定仅在 Visual Studio 调试器中设置断点时有效

jQuery keypress binding works only when a breakpoint is set in Visual Studio debugger

javascript

jquery

debugging

keypress