CODEWITHSUNDEEP
javascripthtmlvue.js
Takeshi Tokugawa YD
Takeshi Tokugawa YD

Reputation: 979

<input type="number"> does not prevent the invalid numbers inputting, but "element.value" does not allow me to correct them

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.

enter image description here

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.)

Upvotes: 4

Views: 3997

Answers (3)

Michal
Michal

Reputation: 11

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.component('input-element', {
    template: ' <input :type="type" :value="inputValue" @input="onInput($event.target)" />',
    props: {
        type: String,
        value: String | Number | Boolean
    },
    computed: {
        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.com/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>

Upvotes: 0

F&#225;bio Garcia
F&#225;bio Garcia

Reputation: 99

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

Upvotes: 5

swam_htet_aung
swam_htet_aung

Reputation: 11

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

Upvotes: 0

Related Questions