CODEWITHSUNDEEP
javascripthtmljquery
Novice
Novice

Reputation: 308

keyup sometimes firing twice

Why keyup sometimes firing twice?

I followed to use unbind and bind but seems not working.

My code [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>

Javascript part:

    $('#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) {
          ....

Upvotes: 0

Views: 2760

Answers (4)

Daniel Katz
Daniel Katz

Reputation: 2408

In my case, I initialized my event handling twice because I did it inside

document.onreadystatechange = function() {...}

But this function is being called multiple times depending on the phase:

https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

So I should've distinguished between events by reading value from document.readyState

Upvotes: 1

Bhala Hariharan
Bhala Hariharan

Reputation: 296

keyup event is triggered when a key is released. When a key combination is used (e.g. Shift + Tab) the event will be triggered two or more times depending on the key combination used.

The keyup event will be triggered twice for the key combination Shift + Tab. One event for the Shift and one event for the Tab.

You can handle this case by writing a condition in the callback function to allow only numbers (considering the OTP will be numeric) by taking the value of the key pressed by the user using the event.key property.

$("#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) {
  ...
});

For more information, please refer to the documentation https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

Upvotes: 1

Joe
Joe

Reputation: 948

.bind() is deprecated. Try using .on() instead and see if that helps?

See https://api.jquery.com/bind/ for more info

Edit: same for .unbind(), use .off() instead. It may not help the problem but hopefully that's why.

Upvotes: 0

Novice
Novice

Reputation: 308

I put delay (500ms) on keyup but seems it's working. But i don't know, is it correct way to avoid my issue?

Upvotes: 0

Related Questions