text field accepting floating number works fine in chrome not in firefox

Question

I have a function in js which accepts only floating number, in which regex of floating number is being tested

$(document).ready(function () {

    $(".validate-foating-value").keypress(function (e) {
         if (!/^[0-9]*\.?[0-9]*$/.test($(e.target).val() + String.fromCharCode(e.which))) {
            return false;
        }
    });
});

its working fine in chrome in Firefox as well but problems I am facing through Firefox are

backspace not working
arrow keys not working
shift+arrow keys for selection and Ctrl+A not working

here is the fiddle.

any other work around for FLOATING numbers?

Why do you concatenate `String.fromCharCode(e.which)` before performing the validation? I guess when you press those special keys, this is returning something that doesn't match the regexp. — Barmar, May 05 '15 at 04:18
@Barmar i checked it out in debugging mode - before concatenating ` String.fromCharCode(e.which) ` , i had pressed a key but `$(e.target).val()` had nothing in it, but i actually pressed the key, then I check that i am having value in `e.which` then to overcome it i appended it in `$(e.target).val()` — Sindhoo Oad, May 05 '15 at 04:23
In Chrome, editing keys like backspace don't trigger the `keypress` event, in Firefox they do. — Barmar, May 05 '15 at 04:25
See http://stackoverflow.com/questions/8569138/catching-backspace-on-chrome-firefox-is-different for example — Barmar, May 05 '15 at 04:26
@Barmar yes you are right, and that's why i am suffering now, I wonder why all browser do not have same behavior , why they have different js engines. — Sindhoo Oad, May 05 '15 at 04:30
Seems like a Firefox bug to me. But the `keypress` event is deprecated, so you generally should avoid it. http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress — Barmar, May 05 '15 at 04:34

score 1 · Accepted Answer · answered May 05 '15 at 04:34

1

You can hack something like:

$(document).ready(function () {

$(".validate-foating-value").keypress(function (e) {
    var keyCode =  e.keyCode ? e.keyCode : e.which ? e.which : e.charCode;

     if (!/^[0-9]*\.?[0-9]*$/.test($(this).val() + String.fromCharCode(keyCode)) && keyCode!=8) {
        return false;
    }
});

});

Please let me know if it works for you.

Thanks

answered May 05 '15 at 04:34

Pratap Patil

234
1
4

I think we need to hack something like above for backspace, you can add other keys code in the condition and it will work. – Pratap Patil May 05 '15 at 04:49
yeah I am trying something like that for now, but something inside me is saying its not the right way but a good trick, isn't it? – Sindhoo Oad May 05 '15 at 04:50
Yea, this will resolve your issue, but I don't think there is any simple way, might be next versions of FF will support it :) – Pratap Patil May 05 '15 at 04:52

score 0 · Answer 2 · edited May 23 '17 at 11:50

I changed your Javascript/JQuery code to

$(document).ready(function () {
  $(".validate-foating-value").bind('input propertychange', function () {
      if (!/^[0-9]*\.?[0-9]*$/.test($(this).val())) {
          var currentVal = $(this).val();
          $(this).val(currentVal.slice(0,-1));
      }
  });
});

There is one issue with keypress that's documented here, namely this event is not consistently fired across browsers (for instance backspace does not trigger a keypress on Chrome).

I tried using keyup in place of keypress but I couldn't figure out how to detect the fact that the keyboard event was producing some input. I thought of using the JQuery .change on the input box but this event is not fired every time a key is pressed but only when the elements loses focus.

So in the end I I found a solution in the accepted answer to Validate html text input as it's typed

Please let me know if this helps.

http://jsfiddle.net/user2314737/b85k3zbh/10/

text field accepting floating number works fine in chrome not in firefox

2 Answers2