javascript - Prevent decimal place being entered into input field on mobile - Stack Overflow

admin管理员组

文章数量:1398226

I have this javascript code, which, on desktop browsers works well to ensure the user can only enter characters 1 to 9.

However when testing in Chrome on Android, the keypad presented includes dash and period characters which the field accepts. How can I prevent this?

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }

UPDATE:

This is how I am using the function in HTML:

  <input type="number" class="form-control" 
         onkeypress="return isNumberKey(event)" />

I have another function to prevent being able to copy and paste non numeric chars into the code.

    $(document).ready(function() {
        $('#number').bind("cut copy paste drag drop", function(e) {
            e.preventDefault();
        });     
    });

And if all else fails, there's server-side validation.

I really want to stop decimal places being possible on the front end. Remember the character range I specified restricts this fine on a qwerty keyboard - however on android (and probably others) the number key pad allows entering . and -

I have this javascript code, which, on desktop browsers works well to ensure the user can only enter characters 1 to 9.

However when testing in Chrome on Android, the keypad presented includes dash and period characters which the field accepts. How can I prevent this?

    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : evt.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57))
            return false;
        return true;
    }

UPDATE:

This is how I am using the function in HTML:

  <input type="number" class="form-control" 
         onkeypress="return isNumberKey(event)" />

I have another function to prevent being able to copy and paste non numeric chars into the code.

    $(document).ready(function() {
        $('#number').bind("cut copy paste drag drop", function(e) {
            e.preventDefault();
        });     
    });

And if all else fails, there's server-side validation.

I really want to stop decimal places being possible on the front end. Remember the character range I specified restricts this fine on a qwerty keyboard - however on android (and probably others) the number key pad allows entering . and -

• javascript
• android
• jquery
• html
• google-chrome

Share Improve this question Follow edited Dec 14, 2017 at 10:21 egmfrs asked Dec 13, 2017 at 18:26 egmfrsegmfrs 1,37033 gold badges1919 silver badges3535 bronze badges 3

• If all you want are numbers, why not explicitly check for the range of 48 - 57? Not sure why the 31 check is in there – Taplar Commented Dec 13, 2017 at 18:31
• Also can you show us what event binding(s) you are using this method in? – Taplar Commented Dec 13, 2017 at 18:33
• @Taplar Could it be to allow for backspace? I've updated my answer to give more detail – egmfrs Commented Dec 14, 2017 at 10:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

One possible solution:

<script>
function onlyNumbers(num){
   if ( /[^0-9]+/.test(num.value) ){
      num.value = num.value.replace(/[^0-9]*/g,"")
   }
}
</script>
<input type="text" onkeyup="onlyNumbers(this)">

Try using the HTML attributes min and max to set the range of numbers and type=number to allow for only numbers.

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

本文标签： javascriptPrevent decimal place being entered into input field on mobileStack Overflow