How can I prevent numeric inputs using VueJS

Question

I need to create a validation that prevent the user from inputting numeric inputs on a textbox. I found some solution using a native javascript but it is not working on my side.

On my text box I have this trigger

v-on:keyup="preventNumericInput($event)">

And on my Vue I created a function on my class

preventNumericInput($event) {
    console.log($event.keyCode); //will display the keyCode value
    console.log($event.key); //will show the key value

    var keyCode = ($event.keyCode ? $event.keyCode : $event.which);
    if (keyCode > 47 && keyCode < 58) {
        $event.preventDefault();
    }
}

Can you help me with this?

You should really be watching the input and reacting to numeric input. Alternatively you could use oninput — Derek Pollard
– Derek Pollard, Commented Jun 13, 2018 at 2:17
keyup might be too late an event to catch. Try keydown or keypress — Phil
– Phil, Commented Jun 13, 2018 at 2:18

Yeonho · Accepted Answer · 2019-06-26 04:54:32Z

5

As mentioned in my comment, keyup will be firing too late to prevent the value being entered into the input field. For example, think about holding a key down to enter the same value repeatedly; there is no key up.

Instead, usekeydown or keypress

<input @keypress="preventNumericInput">

Demo ~ http://jsfiddle.net/wadt08jm/1/

edited Jun 26, 2019 at 4:54

Yeonho

3,6335 gold badges41 silver badges62 bronze badges

answered Jun 13, 2018 at 2:23

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

reno184 · Accepted Answer · 2022-04-06 11:56:44Z

0

Input must be type number, otherwise isNaN won't work

   <input type="number" :value="price" step="0.1" min="0" @input="onInput($event)" >

into input replace ',' by '.'
test if not number
if not number replace observable price by element.value

  data () {
    return { price: 0 }
  },
  methods: {
    onInput (e: Event) {
      const element = e.target as HTMLInputElement
      const value = parseFloat(element.value === '' ? '0' : element.value.replace(',', '.'))
      if (isNaN(value)) {
        element.value = this.price.toString()
      } else {
        this.price = value
      }
    }
  }

edited Apr 6, 2022 at 11:56

answered Nov 8, 2021 at 9:45

reno184

1146 bronze badges

Comments

Alper Guven · Accepted Answer · 2023-03-02 12:04:49Z

0

In Vue 3, you can turn off the scroll to change when input type is number feature by modifying the input element's behavior using a directive. Here is the directive:

beforeMount(el, binding, vnode, prevVnode) {
  el.addEventListener('wheel', (event) => {
    if (el.type === 'nunmber') {
        el.blur()
        event.preventDefault()
      }
    },
    { passive: false }
)},
unmounted(el, binding, vnode, prevVnode) {
 document.body.removeEventListener('wheel', (event) => {
   el.blur()
   event.preventDefault()
 })
}

answered Mar 2, 2023 at 12:04

Alper Guven

811 silver badge5 bronze badges

Collectives™ on Stack Overflow

How can I prevent numeric inputs using VueJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related