Simple number input validation in Javascript (Firefox error)

Question

function onlyNumberInput(evt) {
var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /[0-9]/;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}

Works fine on Chrome but in Firefox I cant press delete or backspace key to edit number. Where is the problem in my script? Of course I can use another way to do this but i want to know what errors is going on Firefox to execute above script?

score 0 · Answer 1 · edited Jan 31 '17 at 10:57

0

if(theEvent.preventDefault) theEvent.preventDefault();

You missed "{"

if(theEvent.preventDefault){
  theEvent.preventDefault();
}

JavaScript is CaseSensitive. Remember that. Hope it helped. Good luck.

edited Jan 31 '17 at 10:57

Carsten Løvbo Andersen

26,637
10
47
77

answered Jan 31 '17 at 10:52

Dan Nemtanu

1

1

It is true that Javascript is CaseSensitive but also allowed this `if(theEvent.preventDefault) theEvent.preventDefault(); ` you don't have to use breackets for one line codes on if conditions – halilcakar Jan 31 '17 at 11:09
That is not a problem I think... Although I just tried with Braces. But remember Chrome is working. In Firefox pressing backspace/del key is calling my function also and refused to do any normal work of these key but in chrome it is not calling my function when pressing these keys and only for number keys it calling my function and works well. – Raju Ahmed Jan 31 '17 at 13:24

score 0 · Answer 2 · edited May 23 '17 at 12:24

Hello @Raju Ahmed i check your code and figure that u are testing key's with regex but the problem is it's only checking for number's and this is what u asked. But also u need to check for Delete Key(which is 46) and also check for Backspace(which is 8) and other keys what u want to use.

Also i test your code on Chrome build 55.0.2883.87 m (64-bit) and it's also not working for delete, backspace and others.

You might want to use like this if u use jQuery:

function onlyNumberInput(evt) {
        var theEvent = evt || window.event;
        var allowed = [8, 17, 46, 37, 38, 39, 40];
        var key = theEvent.keyCode || theEvent.which;
        var regex = /[0-9]/;
        if($.inArray(allowed, key) !== -1) {
            key = String.fromCharCode( key );
            if( !regex.test(key) ) {
                theEvent.returnValue = false;
                if(theEvent.preventDefault) 
                    theEvent.preventDefault();
            }
        }
    }

If you want to use other keys, find the keyCode the key and add into allowed. If you don't use JQuery in your code please let me know. I can change it to normal version :)

One more thing this is allowed to use in JS if you have only one line job:

if(theEvent.preventDefault) 
    theEvent.preventDefault();

Edit II:

Well @Raju i have check the code again it's not working as u wish. So i found an example about it with a plugin if you want to use it.

Plugin : NumericInput,

Demo: Demo

You can check this link about number only input's: HTML Text Input allow only Numeric input

Thanks for your effort. Using same version and jQuery also. Your script worked for delete/backspace in Firefox but now it is not able to identify number both browsers.. People of many countries will going to use my application. So It should worked for any version of browser. — Raju Ahmed, Jan 31 '17 at 13:16

Simple number input validation in Javascript (Firefox error)

2 Answers2