I'm using the commonly used Javascript function to allow only numbers to be inputted into a text field:

function isNumberKey(evt)
{
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode != 46 && charCode > 31
    && (charCode < 48 || charCode > 57))
     return false;

  return true;
}

I call this onkeypress and it prevents anything but numbers to display. I'm trying to alter it so it will allow me to also put dashes (-) into the text field. The dash keycode is 189 so I tried this:

function isNumberKey(evt)
{
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode != 46 && charCode != 189 && charCode > 31
    && (charCode < 48 || charCode > 57))
     return false;

  return true;
}

Thinking that the conditional statement would then accept the dash character but that didn't seem to work. Any ideas on why this would be? Thanks for your help!

I'm using the commonly used Javascript function to allow only numbers to be inputted into a text field:

function isNumberKey(evt)
{
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode != 46 && charCode > 31
    && (charCode < 48 || charCode > 57))
     return false;

  return true;
}

I call this onkeypress and it prevents anything but numbers to display. I'm trying to alter it so it will allow me to also put dashes (-) into the text field. The dash keycode is 189 so I tried this:

function isNumberKey(evt)
{
  var charCode = (evt.which) ? evt.which : event.keyCode;
  if (charCode != 46 && charCode != 189 && charCode > 31
    && (charCode < 48 || charCode > 57))
     return false;

  return true;
}

Thinking that the conditional statement would then accept the dash character but that didn't seem to work. Any ideas on why this would be? Thanks for your help!

• javascript

6 Answers 6

If you're using the keypress event you need to use the character code 45 for dash/hyphen.

If you're using the keydown/keyup events then you need to use 109 and 189 to cover the minus key in the numeric keypad and the one (usually) located above the P key.

if (charCode != 46 && charCode != 45 && charCode > 31
    && (charCode < 48 || charCode > 57))
     return false;

Demo: http://jsfiddle.net/J6B7U/

If you have doubts about which keycode is which a console.log(charCode); in your function will help you debug.

(Note also that trapping a key event is not enough to prevent invalid data being entered, because the user may change the field using the browser's edit menu or drag'n'drop.)

try this

  function isNumberKey(evt)
  {
     var charCode = (evt.which) ? evt.which : event.keyCode
     if (charCode != 45  && charCode > 31 && (charCode < 48 || charCode > 57))
        return false;

     return true;
  }

in html

<input type="text" onkeypress="return isNumberKey(event)">

You want to use the character code for the dash, which is 45, not the keycode.

this code for only number types

<input onkeypress="return isNumberKey(event);">
<script>
function isNumberKey(evt)
{
   var t = (evt.which) ? evt.which : event.keyCode;
     return !(t > 31 && (t < 48 || t > 57))
}
</script>

This came up when I was asking, so it might be worth adding here that keyCode and charCode are deprecated, as at this time.

A better way of adding the check or implementing an isNumberKey function that also accepts the '-' character could be:

const isNumberKey = (event: KeyboardEvent) => 
   ((event.key.length > 1) || event.key.match(/^\d|-$/))

This way, we check allow special keys do their function, while making sure only numbers are allowed when single character keys are pressed.

This doesn't work well with mobile devices. For example, Chrome on Android will bring up the number keypad rather than the full keyboard when the input type is set to "number". You could try using input type="tel" instead. It would allow numbers 0-9, the - and (). It would also bring up the dial pad on Android. Haven't tested on iPhone.