javascript - Which is the proper way of filtering numeric values for a text field? - Stack Overflow

admin管理员组

文章数量:1391951

I'm working on a textfield working with the kind of validation that wouldn't let you enter other than numeric values. As so, my initial code looked quite simple and similar to this:

$(textField).onKeyPress(function(e) {
    if (e.which < 48 && e.which > 57)
        e.preventDefault();
});

This is fairly strightforward, but turns that (in the latest version of all browsers) Firefox will make this also prevent movement with the arrow keys and delete/backspace keys, whereas the other browsers would not.

Looking around I found that I would need to also check for these keys, and check for different properties exposed in the e event reference.

My final code looks something like this:

$(textField).onKeyPress(function(e) {
    var code = e.which || e.keyCode;
    if (code > 31  // is not a control key
        && (code < 37 || code > 40) // is not an arrow key
        && (code < 48 || code > 57) // is not numeric
        && (code != 46) // is not the delete key
    )
        e.preventDefault();
});

However, this feels to be too much to solve a fairly simple problem as just preventing non-numeric.

What am I doing wrong? Which is the best practice in terms of this kind of validation?

I'm working on a textfield working with the kind of validation that wouldn't let you enter other than numeric values. As so, my initial code looked quite simple and similar to this:

$(textField).onKeyPress(function(e) {
    if (e.which < 48 && e.which > 57)
        e.preventDefault();
});

This is fairly strightforward, but turns that (in the latest version of all browsers) Firefox will make this also prevent movement with the arrow keys and delete/backspace keys, whereas the other browsers would not.

Looking around I found that I would need to also check for these keys, and check for different properties exposed in the e event reference.

My final code looks something like this:

$(textField).onKeyPress(function(e) {
    var code = e.which || e.keyCode;
    if (code > 31  // is not a control key
        && (code < 37 || code > 40) // is not an arrow key
        && (code < 48 || code > 57) // is not numeric
        && (code != 46) // is not the delete key
    )
        e.preventDefault();
});

However, this feels to be too much to solve a fairly simple problem as just preventing non-numeric.

What am I doing wrong? Which is the best practice in terms of this kind of validation?

• javascript
• jquery
• validation
• remendation-engine

Share Improve this question Follow asked Jun 2, 2012 at 22:33 AlphaAlpha 7,86888 gold badges6060 silver badges9595 bronze badges 4

• 1 do you care if user copy and paste non-number text to the input box? how about decimal and negative numbers? do you allow those? – Ray Cheng Commented Jun 2, 2012 at 22:42
• @RayCheng Good point. It would be really good to take care of those cases as well, and so I see value in the keyUp solutions provided. I'm amazed at seeing that nobody is using the keyPress approach -- which seems more natural to me. Decimals and negative can be taken out of this approach, my range of allowed characters is plainly digits (0-9). – Alpha Commented Jun 2, 2012 at 23:10
• there could be side effects if you use keypress or keydown because if user keeps the key pressed, the event is repeated and the code gets called multiple times. keyup is only executed once. – Ray Cheng Commented Jun 2, 2012 at 23:18
• @RayCheng see my update below: you can use simple propertychange to deal with it :) hope that help both of you – Tats_innit Commented Jun 2, 2012 at 23:37

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

We'll respond to both keypresses, and the blur event. When somebody press a key, we check to see if the key entered is a number. If it is, we permit it. Otherwise, we prevent it.

If the field is blurred, we remove any non-numerical values, and all those values that follow. This will prevent the user from pasting in non-numerical strings:

$("#textfield").on("keypress blur", function(e){
    if ( e.type === "keypress" )
        return !!String.fromCharCode(e.which).match(/^\d$/);
    this.value = this.value.replace(/[^\d].+/, "");
});

Demo: http://jsfiddle/jonathansampson/S7VhV/5/

Working demo http://jsfiddle/Pb2eR/23/ Updated Copy/Paste demo: http://jsfiddle/Pb2eR/47/ (In this demo wit you copy paste string with characters it won't allow else it will allow number to be copy pasted: tested in safari)

Demo for arrow key to work http://jsfiddle/gpAUf/

This will help you.

Note: in this version even if you copy paste it will set it to empty input box, tested in safari lion osx :)

Good Link: [1] How to allow only numeric (0-9) in HTML inputbox using jQuery?

code

$(".hulk").keyup(function(){    
    this.value = this.value.replace(/[^0-9\.]/g,'');    
});
​

html

<input type="text" class="hulk" value="" />
​

Update for copy paste stuff

$(".hulk").keyup(function(){

    this.value = this.value.replace(/[^0-9\.]/g,'');

});

$(".hulk").bind('input propertychange', function() {

     this.value = this.value.replace(/[^0-9\.]/g,'');
});​

code from another demo

$(".hulk").bind('input propertychange', function(event) {
         if( !(event.keyCode == 8    // backspace
        || event.keyCode == 46      // delete
        || (event.keyCode >= 35 && event.keyCode <= 40)     // arrow keys/home/end
        || (event.keyCode >= 48 && event.keyCode <= 57)     // numbers on keyboard
        || (event.keyCode >= 96 && event.keyCode <= 105))   // number on keypad
        ) {
            event.preventDefault();     // Prevent character input
    }
     this.value = this.value.replace(/[^0-9\.]/g,'');
});

​

this will allow both int. it also removes text if user copy and paste with mouse.

$(document).ready(function () {
    $('#textfield').bind('keyup blur', function (e) {
        if (e.type == 'keyup') {
            if (parseInt($(this).val()) != $(this).val()) {
                $(this).val($(this).val().slice(0, $(this).val().length - 1));
            }
        } else if (e.type == 'blur') {
            $(this).val('');
        }
    });
});

本文标签： javascriptWhich is the proper way of filtering numeric values for a text fieldStack Overflow