3

I build a mechnism using JS for accepting only digits :

However I want to allow : Delete, Backspace , left arrow , right arrow :

the solution I came up with is :

assuming I write in html (which I know its bad to send event , but lets focus on the Js code please) : 

<input  onKeyPress='return CheckDigit(event)'/>



function CheckDigit(evt)
{
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (((charCode >= 48) && (charCode <= 57)) || checkIfDelOrNavigate(charCode)))
        return true;
    return false;
}

  function checkIfDelOrNavigate(c)
    {
        if (((c == 46) || (c == 39) || (c == 37) || (c == 8))) return true;return false;
        /*46=delete , 39,37 = arrows , 8=backspace*/
    }

Questions :

  • Is it the right solution ? (and if it ain't , can you please supply an answer)

  • I assume it can be changed to regex checking :

code:

 var regEx =/^[0-9]+$/;    
 isValid = regEx.test(keyChar); 
 return isValid;

But what will be the full regEx expression ?

p.s. : Strange but all the solutions I saw doesnt want to allow the Delete, Backspace , left arrow , right arrow chars , just the category itself.

Royi Namir
  • 144,742
  • 138
  • 468
  • 792
  • 1
    The keypress does not even fire for those keys, at least in chrome. So it's pretty simple, you have to ignore those keys for cross browser consistency. – Esailija Aug 19 '12 at 13:15
  • Hi @Esailija yeah but in FF it does Fire http://www.asquare.net/javascript/tests/KeyCode.html – Royi Namir Aug 19 '12 at 13:17
  • Also, test if the user can Ctrl+A/Z/X/C/V Tab F5 Enter and screenshot. I hate being stuck in one input box where these doesn't work, hence I took a different approach last time. – Fabrício Matté Aug 19 '12 at 13:18
  • Here's what I did yesterday when I needed a numbers-only input, it also removes unnecessary leading zeroes on blur (`change`), check if it's of any use http://jsfiddle.net/ult_combo/Va6Qb/ (the ugly hack on Chrome is because changing the selectionStart/End doesn't work properly in the `input` event, and the hack for IE is because it doesn't fire the `input` event when characters are deleted). – Fabrício Matté Aug 19 '12 at 13:27
  • For newer browsers, `` may suffice. – pimvdb Aug 19 '12 at 13:36
  • You might find [this question](http://stackoverflow.com/questions/4194163/detect-printable-keys) useful. – mhusaini Aug 19 '12 at 13:57
  • Isn't it easier to clear the input immediately after keypress leaving only allowed characters(numbers in this case)? – Eugene Aug 19 '12 at 14:29
  • Not if you want to preserve the text cursor location. – mhusaini Aug 19 '12 at 14:50

1 Answers1

3

I combine the answer to this question with the following check to make sure I only capture digits while allowing for non-printable characters. You'll have to do something about the paste operation, though.

return !window.isNaN(String.fromCharCode(event.which))

See jsFiddle.

Community
  • 1
  • 1
mhusaini
  • 1,232
  • 11
  • 18
  • It still allows white space to be inserted, but nice answer. Just needs a `event.which !== 32` somewhere in there. Like [this](http://jsfiddle.net/ult_combo/F6YMf/4/). – Fabrício Matté Aug 19 '12 at 15:47