Sometimes, we want to filter text input to only accept numbers and a dot with Vue.js.
In this article, we’ll look at how to filter text input to only accept numbers and a dot with Vue.js.
Filter Text Input to Only Accept Numbers and a Dot with Vue.js
We can filter text input to only accept numbers and a dot with Vue.js by checking for keycodes which aren’t numbers and preventing the default action in those case.
The default action would be to accept the input.
For example, we can write:
<template>
<div id="app">
<input v-model="num" @keypress="isNumber($event)" />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
num: 0,
};
},
methods: {
isNumber(evt) {
const charCode = evt.which ? evt.which : evt.keyCode;
if (
charCode > 31 &&
(charCode < 48 || charCode > 57) &&
charCode !== 46
) {
evt.preventDefault();
}
},
},
};
</script>
to add a number input and the isNumber method which we set as the value of the @keypress directive to check the keys that are pressed.
We get the keyboard key character code from the evt.which or evt.keyCode property.
Then we check if the charCode is the ones listed in the condition in the if statement.
If they match, then we call evt.preventDefault to stop the default action, which is to accept the inputted value.
Conclusion
We can filter text input to only accept numbers and a dot with Vue.js by checking for keycodes which aren’t numbers and preventing the default action in those case.
