It's a simple app with v-text-field for input. I want to enable user input for only numbers, if I try to type like 11a and then press tab or click mouse out of input before I lost focus I see 11, but then focus lost I see 11a. I don't understand how last symbol restored and how fix it. What am I doing wrong?
<div id="app">
<h1>{{message}}</h1>
<v-text-field @input.native="setOnlyNumber" />
</div>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to Vue!'
};
},
methods: {
setOnlyNumber(e) {
e.target.value = e.target.value.replace(/\D+/, '');
}
}
};
</script>```
It is my example app on codepen
https://codepen.io/aleksandra973/pen/BamYdOO
You can use type="number" in <v-text-field> element.
Working Demo :
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
data() {
return {
message: 'Welcome to Vue!'
};
}
});<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<h1>{{message}}</h1>
<v-text-field type="number" label="Number Input Field"/>
</div>As per the comment by author, Adding below working code snippet which will accept both number and alphabets only.
Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
data() {
return {
message: 'Welcome to Vue!'
};
},
methods: {
validateInput(e) {
let char = String.fromCharCode(e.keyCode); // Get the character
if(/^[0-9A-Za-z]+$/.test(char)) return true; // Match with regex
else e.preventDefault(); // If not match, don't add to input text
}
}
});<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<div id="app">
<h1>{{message}}</h1>
<v-text-field type="text" label="Number Input Field" v-on:keypress="validateInput($event)"/>
</div>The easiest way would be to make use of the Number type input of HTML5.
v-text-field can use this type with the following flag:
<v-text-field type='number' />
Alternatively, you could bind to the data and run a validation as follows:
<template>
<div id="app">
<h1>{{message}}</h1>
<v-text-field v-model='number' @change="validate" />
</div>
</template>
<script>
export default {
data() {
return {
message: 'Welcome to Vue!',
number: null,
};
},
methods: {
validate() {
this.number = this.number.toString().replace(/\D+/, '');
}
}
};
</script>