APSB
APSB

Reputation: 587

How to Enable Tab on Jquery

I have problem in there, I've been try to log the event key code and i got key number (9) and i think my script doesn't disable event.keyCode doesn't disable the key function. what should i change on my script so the tab can be active again ?

Here's my code :

$(function() {
  $('.number-format').on("keydown", function(event) {
    console.log(event.keyCode);
    if (event.shiftKey) {
      event.preventDefault();
    }
    if (event.keyCode == 46 || event.keyCode == 8) {} else {
      if (event.keyCode < 95) {
        if (event.keyCode < 48 || event.keyCode > 57) {
          event.preventDefault();
        }
      } else {
        if (event.keyCode < 96 || event.keyCode > 105) {
          event.preventDefault();
        }
      }
    }
  });

  $('.number-format').on("keyup", function(event) {
    var value = this.value.replace(/,/g, "");
    this.dataset.currentValue = parseInt(value);
    var caret = value.length - 1;
    while ((caret - 3) > -1) {
      caret -= 3;
      value = value.split('');
      value.splice(caret + 1, 0, ",");
      value = value.join('');
    }
    this.value = value;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="number-format">

Upvotes: 0

Views: 64

Answers (1)

shrys
shrys

Reputation: 5940

You could change the second condition to if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) as the tab's keyCode being 9 is going into else block and executes event.preventDefault();:

$(function() {
  $('.number-format').on("keydown", function(event) {
    console.log(event.keyCode);
    if (event.shiftKey) {
      event.preventDefault();
    }
    if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9) {} else {
//------------------------------------------------^^^^^^^^^^^^^^^^^^^^^
//add the tab keyCode in this if to skip it entirely so that it woks again
      if (event.keyCode < 95) {
        if (event.keyCode < 48 || event.keyCode > 57) {
          event.preventDefault();
//--------^^^^^^^^^^^^^^^^^^^^^^ this is preventing your tab action
        }
      } else {
        if (event.keyCode < 96 || event.keyCode > 105) {
          event.preventDefault();
        }
      }
    }
  });

  $('.number-format').on("keyup", function(event) {
    var value = this.value.replace(/,/g, "");
    this.dataset.currentValue = parseInt(value);
    var caret = value.length - 1;
    while ((caret - 3) > -1) {
      caret -= 3;
      value = value.split('');
      value.splice(caret + 1, 0, ",");
      value = value.join('');
    }
    this.value = value;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="number-format">

Upvotes: 1

Related Questions