From the MDN documentation about <input type="number">:

They include built-in validation to reject non-numerical entries.

Does it mean "reject when try to submit the HTML form"? I inputted "4e4--23". HTML has not rejected it.

Therefore, <input type="number"> can not prevent the inputting of non-number value. I don't care about I it if I can programically correct user's input. For example, user inputted the minus sign not in the first position - using JavaScript, theoretically I can remove it.

However here is unobvious JavaScript behavior: when input element has "number" attribute and value is invalid number, Element.value returns an empty string. It's very tricky programmatic validation: because we have empty string value, the validator will return "The input must not be empty. Please input the value." error while input in not empty!

document.getElementById("target").addEventListener("input", blackbox => {
 console.log(document.getElementById("target").value);
});

<input type="number" value="" id="target">

From the MDN documentation about <input type="number">:

They include built-in validation to reject non-numerical entries.

Does it mean "reject when try to submit the HTML form"? I inputted "4e4--23". HTML has not rejected it.

Therefore, <input type="number"> can not prevent the inputting of non-number value. I don't care about I it if I can programically correct user's input. For example, user inputted the minus sign not in the first position - using JavaScript, theoretically I can remove it.

However here is unobvious JavaScript behavior: when input element has "number" attribute and value is invalid number, Element.value returns an empty string. It's very tricky programmatic validation: because we have empty string value, the validator will return "The input must not be empty. Please input the value." error while input in not empty!

document.getElementById("target").addEventListener("input", blackbox => {
 console.log(document.getElementById("target").value);
});

<input type="number" value="" id="target">

How can I get the actual inputted value? (If you know Vue, please add the solution for Vue, too.)

• javascript
• html
• vue.js

Share Improve this question Follow edited Sep 11, 2020 at 9:28 Takeshi Tokugawa YD asked Sep 3, 2020 at 6:35 Takeshi Tokugawa YDTakeshi Tokugawa YD 1,03088 gold badges6666 silver badges178178 bronze badges 5

• can u check with <form> tag? – Antony Commented Sep 3, 2020 at 6:46
• @Antony Thank you for the response. My answer: generally - no. I will not wrap every my ponent to form. – Takeshi Tokugawa YD Commented Sep 3, 2020 at 6:49
• You can use the <input>.checkValidity() to know if the value is correct, or else, use an input type text, and filter his value to match numbers. – Thibault Husté Commented Sep 3, 2020 at 6:51
• stackoverflow./questions/31706611/… – Antony Commented Sep 3, 2020 at 6:56
• 1 I don't think browsers validate on input, only when submitting. So a user can put anything in the input field, including plete words. If you need checking on input, you'll have to write your own script. – Michel Commented Sep 3, 2020 at 6:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

try this:

I only accept numbers:
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9]/g, '');">
<br>
I only accept numbers inlcuding a point:
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');">
<br>
EDIT: I accept negative numbers inlcuding a point:
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1');">
<br>
EDIT: I accept negative numbers inlcuding a point:
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1').replace(/(\..*)\./g, '$1');">
<br>
EDIT2: I accept negative numbers inlcuding a point (only one "minus" sign):
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9.-]/g, '').replace(/(\..*)\./g, '$1').replace(/(\..*)\./g, '$1').replace(/(\-.*)\-/g, '$1');">
<br>
EDIT3: I also accept "e" and "E"
<input type="text" v-model="form.availability" oninput="this.value = this.value.replace(/[^0-9\.\-\e\E]/g, '').replace(/(\..*)\./g, '$1').replace(/(\..*)\./g, '$1').replace(/(\-.*)\-/g, '$1').replace(/(\e.*)\e/g, '$1').replace(/(\E.*)\E/g, '$1');">
<br>

Different browsers treat the "input type number" differently

Try <input type="number" inputmode="numeric"> or <input type="tel" inputmode="numeric">

There is workaround in Vue.js. You can use $event.target which has more details. It contains object 'validity' whose properties 'badInput' tells us if value is not correct.

See example bellow, for wrong value like 'e23', '--1' we will get 'NaN' which can be use in validation rules.

Vue.ponent('input-element', {
    template: ' <input :type="type" :value="inputValue" @input="onInput($event.target)" />',
    props: {
        type: String,
        value: String | Number | Boolean
    },
    puted: {
        inputValue: {
            get() {
                if (this.type == 'number') {
                    return !isNaN(this.value) ? this.value : '';
                }

                return this.value;
            }
        }
    },
    methods: {
        onInput(eventTarget) {
            let value = eventTarget.value;

            if (this.type == 'number' && eventTarget.validity?.badInput) {
                value = eventTarget.valueAsNumber;
            }

            this.$emit('input', value);
        }
    }
});

new Vue({
    el: "#app",
    data: {
        numberValue: 0
    }
});

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input-element type="number" v-model="numberValue"></input-element> 
  <div>{{ numberValue }}</div>
</div>