JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<input type="text" id="myInput" value="0">

JavaScript

var numbersOnlyKeyDown = function(event) {

  var input = this;
	
  if (event.which == 64 || event.which == 16) {
    // to allow numbers
    return false;
  } else if (event.which >= 48 && event.which <= 57) {

    //except 0
    if (input.value == '' && event.which == 48) {
      return false;
    }
    // to allow numbers
    return true;
  } else if (event.which >= 96 && event.which <= 105) {
    // to allow numpad number
    return true;
  } else if ([8, 13, 27, 37, 38, 39, 40].indexOf(event.which) > -1) {
    // to allow backspace, enter, escape, arrows
    //console.log(event)
    return true;
  } else {
    event.preventDefault();
    // to stop others
    return false;
  }
}



var elm = document.getElementById('myInput');
elm.addEventListener('keydown', numbersOnlyKeyDown, false);