HTML5输入类型编号不能阻止加号，减号

Question

I am using input type number and It's preventing character but it's unable to prevent plus, minus symbol or character. But I require to prevent all symbol.

<input type="number">

I have worked on it and create my customise regex and it's working fine but I want to know why it's working like that for input type number and how we can fix that.

Answer 1

You can do it with simple and a minimum limit for your number. Something like this:

<input min="0" type="number" step="1">

Now adding + or - signs make field value invalid and step=1 is for when you only need unsigned integers. If you don't need that, simply remove it.

Edit

If you don't want to + and - signs show in the filed, plus don't accept that input, you need to use some js. Here is the simplest pure js solution I think:

Your html code:

<input min="0: type="number" step="1" onkeypress="removeSigns()" id="my-input">

And now you need to add this little script to your page:

function removeSigns() {
    var input = document.getElementById('my-input');
    input.value = parseInt(input.value.toString().replace('+', '').replace('-', ''))

This script gets the element that has my-element id, then overwrite its value.

The new value is int version of old value after replacing + and - signs in it with an empty string(removing them from the string in reality). This solution is good when you only have one input, if you had more number input, you should change the removeStrin to a version that gives input object from this in the onkeypress . But I don't add that version because of simplicity of the solution. }

Answer 2

Because that's exactly how the spec says it should work. The number input can accept floating point numbers , including negative symbols and the e or E character:

A floating-point number consists of the following parts, in exactly the following order:

1. Optionally, the first character may be a " - " character.
2. One or more characters in the range " 0—9 ".
3. Optionally, the following parts, in exactly the following order:
   1. a " . " character
   2. one or more characters in the range " 0—9 "
4. Optionally, the following parts, in exactly the following order:
   1. a " e " character or " E " character
   2. optionally, a " - " character or " + " character
   3. One or more characters in the range " 0—9 ".

Answer 3

You can do this using jquery

$('input').keypress(function (e) {
    var txt = String.fromCharCode(e.which);
    if (!txt.match(/[0-9]/)) {
        return false;
    }
});