0
0 Comments 

			
(function () {   "use strict";   var body =("body");

  function checkKey(key) {
    if (key != 9 && (key < 48 || key > 57)) {
      return false;
    }
    return true;
  }
  function goToNextInput(e) {
    var key = e.which,
      t = (e.target),       sib = t.next("input");      if (key != 8 && (key < 106 && key > 96) != true && checkKey(key) == false) {       e.preventDefault();       return false;     }      if (!sib || !sib.length) {       sib = body.find("input").eq(0);     }     sib.select().focus();   }   function onKeyDown(e) {     var key = e.which;     if (key != 8 && (key < 106 && key > 96) != true && checkKey(key) == false) {       e.preventDefault();       return false;     }   }    function onFocus(e) {(e.target).select();
  }

  body.on("keyup", ".otp-field", goToNextInput);
  body.on("keydown", ".otp-field", onKeyDown);
  body.on("click", ".otp-field", onFocus);
});


			
input{
  width: 5rem;
  text-align: center;
}


			
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="otp-field" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" name="otp[]" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" />
<input type="number" class="otp-field" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" name="otp[]" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" />
<input type="number" class="otp-field" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" name="otp[]" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" />
<input type="number" class="otp-field" maxLength="1" size="1" min="0" max="9" pattern="[0-9]{1}" name="otp[]" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" />

I have the following function which allows only number and excludes everything else when the user provides an input. However, this function is also blocking backspace and I am not being able to delete the number typed.

(function() {   'use strict';   var body =('body');
  function goToNextInput(e) {
    var key = e.which,
    t = (e.target),     sib = t.next('input');     if (key != 9 && (key < 48 || key > 57)) {       e.preventDefault();       return false;     }     if(key === 9) {       return true;     }     if(!sib || !sib.length) {       sib = body.find('input').eq(0);     }     sib.select().focus();   }   function onKeyDown(e) {     var key = e.which;     if (key === 9 || (key >= 48 && key <= 57)) {       return true;     }     e.preventDefault();     return false;   }   function onFocus(e) {(e.target).select();
  }
  body.on('keyup', '.otp-field', goToNextInput);
  body.on('keydown', '.otp-field', onKeyDown);
  body.on('click', '.otp-field', onFocus);
})

Here on line 

if (key != 9 && (key < 48 || key > 57))
I tried using 
key != 9 OR key != 8
as the key code for backspace is 8 but it's not working. How can I allow backspace here?

Anonymous Asked question May 14, 2021