VueJS - disable space in input text VueJS - disable space in input text vue.js vue.js

VueJS - disable space in input text


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>


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


To prevent spaces on all input events - keypress, paste or drag and drop text:

const removeEventSpaces = e => {  e.preventDefault();  const left    = e.target.value.substring(0, e.target.selectionStart);  const right   = e.target.value.substring(e.target.selectionEnd, e.target.value.length);  const pasted  = (e.dataTransfer || e.clipboardData).getData('text').replace(/ /g, '');  e.target.value = left + pasted + right;}<input @keydown.space.prevent @paste="removeEventSpaces" @drop="removeEventSpaces"/>