VueJS - disable space in input text

Question

I have a component called TextInput.vue, and inside I created a div.

<div ts-text-input :ts-text-input-filled="setFilledAttribute && !!value" :ts-text-input-not-valid="!valueValid">  <input :value="value" @input="setValue" @keyup.enter="enterClicked" :placeholder="placeholder" :title="title"> 

what I wanted to do now is that to disable some spaces inside the input box so that the user is unable to type in with spaces/spacebar (like, e.g., username input box)

Here is what I have done; I try to use the function trim(), but it seems I can't still fix it.

in the computed function

    computed: {   value: function() {     const {valueGetter, valueGetterOptions} = this,       getter = this.$store.getters[valueGetter];       value.trim();     return valueGetterOptions ? getter(valueGetterOptions) : getter;   }, 

Any hints would be helpful. thanks. (sorry for my bad English)

Answer 1

You can directly prevent that the user adds a white space to your input field. preventDefault() tells the user agent that the default action should not be taken as it normally would be.

<input @keydown.space="(event) => event.preventDefault()"> 

Or to make it even shorter (as Sovalina pointed out):

<input @keydown.space.prevent> 

Answer 2

@keydown.native.space didn't work for me. @keydown.native.space.prevent did.