Force numeric only js function doesn't work in Firefox but in Chrome & IE works fine

Question

I have a javascript function which deny any character except numeric one:

$(".number").keypress(this.EnsureNumbers);

EnsureNumbers: function (event) {
   var value = $(this).first().val();

   value = value.substring(0, $(this)[0].selectionStart) + String.fromCharCode(event.keyCode) + value.substring($(this)[0].selectionEnd);
   if (!value.match(/^\d+$/)) {
      event.preventDefault();
   }
}

This function allows user (if uses Chrome/IE) to select any part of number (by using SHIFT key) and change selected number/letter.

But in Firefox, this method doesn't allow me to press Backspace or using left/right keys.

Again, in Chrome and IE (even IE8) works fine. Does anyone know is a bug in Direfox ? Or it is from me ?

I have Firefox 22.

Example, take a look over: http://jsfiddle.net/TR8t4/

Answer 1

Yes, it's a bug in Firefox. It triggers the keypress event when you use editing and arrow keys. These keys should trigger keydown , but not keypress .

This incorrect behavior is listed in the compatibility matrix at QuirksMode .

Answer 2

As @Barmar said, it is an incorrect behavior in Mozilla FF.

Once I too faced an issue like this. But I resolved by detecting the browser like $.browser.mozilla . Though this is now depreciated in latest version of jQuery.

What I did is here

$('selector').keypress(function(event){              
                if($.browser.mozilla == true){                      
                      if (event.keyCode  == 8 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 9 || event.keyCode == 16 || event.keyCode == 46){
                            return true;
                      }
                }
                if (event.which < 48 || event.which > 57) {                     
                    event.preventDefault();                    
                  }
            });

JSFiddle for your reference.