Javascript keyup有时发射两次

为什么

keyup

有时会触发两次

我使用了unbind和bind，但似乎不起作用

我的代码[HTML]：

   <div id="otpmsg" class="error-otp text-center"></div>
    <div id="otp" name="otp" class="form-group text-center">
     <input class="m-2 text-center otp-control otp-control-solid" type="text" id="first" maxlength="1" />
     <input class="m-2 text-center otp-control otp-control-solid" type="text" id="second" maxlength="1" />
     <input class="m-2 text-center otp-control otp-control-solid" type="text" id="third" maxlength="1" />
     <input class="m-2 text-center otp-control otp-control-solid" type="text" id="fourth" maxlength="1" />         
    </div>

    $('#otp').unbind('keyup');
      $('#otp').bind('keyup', function (e) {
        e.preventDefault();
        const inputs = document.querySelectorAll('#otp > *[id]');
        let compiledOtp = '';
            for (let i = 0; i < inputs.length; i++) {
                compiledOtp += inputs[i].value;
            }
        otp = compiledOtp;
          if(otp.length == 4) {
          ....

Javascript部分：

   <div id="otpmsg" class="error-otp text-center"></div>
    <div id="otp" name="otp" class="form-group text-center">
     <input class="m-2 text-center otp-control otp-control-solid" type="text" id="first" maxlength="1" />
     <input class="m-2 text-center otp-control otp-control-solid" type="text" id="second" maxlength="1" />
     <input class="m-2 text-center otp-control otp-control-solid" type="text" id="third" maxlength="1" />
     <input class="m-2 text-center otp-control otp-control-solid" type="text" id="fourth" maxlength="1" />         
    </div>

    $('#otp').unbind('keyup');
      $('#otp').bind('keyup', function (e) {
        e.preventDefault();
        const inputs = document.querySelectorAll('#otp > *[id]');
        let compiledOtp = '';
            for (let i = 0; i < inputs.length; i++) {
                compiledOtp += inputs[i].value;
            }
        otp = compiledOtp;
          if(otp.length == 4) {
          ....

$（'otp'）。解除绑定（'keyup'）；
$（'#otp'）.bind（'keyup'，函数（e）{
e、 预防默认值（）；
const inputs=document.querySelectorAll（'otp>*[id]'）；
让compiledOtp=''；
for（设i=0；i

我将延迟（500毫秒）设置在keyup上，但它似乎正在工作。 但我不知道，这是避免我的问题的正确方法吗？

.bind（）

已被弃用。请尝试改用

.on（）

，看看是否有帮助

有关更多信息，请参阅

---

编辑：与

.unbind（）

相同，使用

.off（）

代替。这可能无助于解决问题，但希望这就是原因。

keyup

事件是在释放按键时触发的。当使用按键组合时（例如

Shift+Tab

），该事件将被触发两次或更多次，具体取决于使用的按键组合

---

对于组合键

Shift+Tab

，将触发两次

keyup

事件。一个事件用于

Shift

，一个事件用于

Tab

您可以通过在回调函数中写入一个条件来处理这种情况，即通过使用

event.key

属性获取用户按下的键的值，从而只允许数字（考虑到OTP将是数字）

$("#otp").on("keyup", function (e) {
  e.preventDefault();

  const pressedKey = e.key;
  if (!/^[0-9]+$/.test(pressedKey)) {
    return;
  }

  const inputs = document.querySelectorAll("#otp > *[id]");
  let compiledOtp = "";
  for (let i = 0; i < inputs.length; i++) {
    compiledOtp += inputs[i].value;
  }
  otp = compiledOtp;
  if (otp.length == 4) {
  ...
});

$（“#otp”）。关于（“键控”，函数（e）{
e、 预防默认值（）；
const pressedKey=e.key；
如果（！/^[0-9]+$/.test（按键））{
返回；
}
const inputs=document.queryselectoral（“#otp>*[id]”）；
让compiledOtp=“”；
for（设i=0；i

---

有关更多信息，请参阅文档

谢谢您的回答。尝试过但没有解决问题我在没有shit/alt+tab的情况下尝试过，但有时仍会触发两次。我认为这是因为用户在1次内键入多个数字，而且速度非常快。因此它被称为keyup两次或两次以上每个按键都会触发

keyup

事件eleased。即使按下多个数字，也会触发按下的次数，这是预期的行为。当用户连续键入时，您可以尝试聚焦下一个输入字段，并在达到OTP长度时执行操作，以避免任何副作用。希望有帮助！我会尝试，谢谢您的建议