How to allow only digits to be entered into an input[type="number"] field?

Question

I have an input field in which the user should only be able to enter digits [0-9].

document.getElementById("integer").addEventListener('input', restrictToInteger);
function restrictToInteger() {
    this.value = this.value.replace(/[^\d]/g, '');
}

<input type="number" id="integer" />

jsFiddle Demo

The problem is this: When I enter a number (eg. 1234) and then press dot (.), + or - the content of the input field is automatically deleted by the browser (value is set to "" = empty string). But why? Changing the type from number to text seems to fix the problem. But then I lose the up/down arrow functionality of the input field. Any ideas?

Answer 1

HTML 4 has an event called onkeypress. With that attribute we can do this without using additional JS:

<input type="number" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57">

Here digits from 0 to 9 are allowed using the event.charCode from 48 to 57.

Answer 2

The only problem was your input type. Change it to text and it should work !

function validate(e) {
    var charCode = e.keyCode? e.keyCode : e.charCode
    if (!(charCode >= 48 && charCode <= 57)) {
        if(!(charCode>=37 && charCode<=40))
            if(charCode!=8 && charCode!=46)
            return false;
    }
}

<input type="number" id="integer" pattern="[0-9]"
onkeydown="return validate(event)"/>