Javascript / Jquery checking decimal input on key press / key press

Question

I am trying to find a way to check text input when a key is pressed, I want to only allow numbers inside my text input, including decimals.

I used the jQuery.keydown approach and checked what the key is, and using event.preventDefault () if the key was not in the allowed list. But since then I read that the keys do not match all browsers, and I am also worried about different OSs.

I came across this question, but I'm not sure about the regex and not sure if this will suit my needs: jquery - checking for characters on the keyboard?

With this approach, the regular expression that expects 00.00 will stop the user when 00 is entered. Since the regular expression is checked by pressing a key.

thanks

Answer 1

You should not rely on key events, as this means that the check will not work if the user right-clicks → with invalid characters.

Instead, you need to use something like a zurb textchanged event, which will fire exactly regardless of the input mode (key, paste, drag and drop, etc.)

http://www.zurb.com/playground/jquery-text-change-custom-event

Inside your textchanged handler, you can enter the appropriate regular expression to handle decimal places.

Answer 2

If you want to limit input (as opposed to checking), you can work with key events. something like that:

 <input type="text" class="numbersOnly" value="" /> 

and

 jQuery('.numbersOnly').keyup(function () { this.value = this.value.replace(/[^0-9\.]/g,''); }); 

or , we can update this after the user “left” this field, with the on change event, so the user can navigate through the text using the arrow keys.

 jQuery('.numbersOnly').on('change', function () { this.value = this.value.replace(/[^0-9\.]/g,''); }); 

This immediately allows the user to know that they cannot enter alpha characters, etc., and not later in the verification phase.

You still want to check, because the input can be filled out by cutting and pasting with the mouse or, possibly, using auto-completion of the form, which may not trigger key events.

Fiddle: http://jsfiddle.net/shannonhochkins/eu7P9/

Answer 3

I used e.which to check decimal numbers

 $(document).ready(function () { var isEnable=true; $(".only-number-period").live('keydown', function (e) { //isEnable = (e.which != 110) ? false : true; if( ((e.which == 9) || (e.which == 46) || (e.which == 8) || (e.which == 110) || (e.which >= 48 && e.which <= 57) || (e.which >= 96 && e.which <= 105))){ if(isEnable ==false && e.which ==110){return false;} }else{ return false } if (isEnable == true) { isEnable=(e.which ==110)?false:true; } }); });​ 

link :: Http://jsfiddle.net/rTr2w/

Answer 4

using Shannon , I provide the following simple JS code:

 jQuery('.numbersOnly').keyup(function () { if(($(this).val().split(".")[0]).indexOf("00")>-1){ $(this).val($(this).val().replace("00","0")); } else { $(this).val($(this).val().replace(/[^0-9\.]/g,'')); } }); 

See this in action: http://jsfiddle.net/SnakeEyes/eu7P9/2/

Update To avoid a multiple character . use the following code:

 jQuery('.numbersOnly').keyup(function (e) { if(($(this).val().split(".")[0]).indexOf("00")>-1){ $(this).val($(this).val().replace("00","0")); } else { $(this).val($(this).val().replace(/[^0-9\.]/g,'')); } if($(this).val().split(".")[2] != null || ($(this).val().split(".")[2]).length ){ $(this).val($(this).val().substring(0, $(this).val().lastIndexOf("."))); } }); 

Example: http://jsfiddle.net/SnakeEyes/eu7P9/3/