Filter out letters from an input, to only keep numbers

Hello,

I’m trying to build an input that can only have numbers as value.

I did something like this :
template:

<input @input="handleInput($event)" :value="value">

script:

data() {
    return {
        value: null
    }
},

methods: {
    handleInput(event) {
        this.value = event.target.value.replace(/\D/g, "")
    }
}

But I can still type letters,

So I created a CodeSandbox so you can try by yourself :


All code is in the App.vue file.
In this sandbox you can manipulate the input value in order to have it :

  • uppercase (it works)
  • only numeric (it doesn’t work)

Thanks for your help

You can use input with @keyup.native=" " and then .replace(/[^\d]/g, ‘’) deletes letters immediately, but leaves numbers.

Thanks zany,

Issue is still here when using keyup.

The 3rd section (bonus) of the codesandbox,seems like a vue related bug, maybe I should ask this question on the github repository ?

You can try. :slight_smile: