Sometimes, we want to disable space in input text with Vue.js and JavaScript.

In this article, we’ll look at how to disable space in input text with Vue.js and JavaScript.

How to disable space in input text with Vue.js and JavaScript?

To disable space in input text with Vue.js and JavaScript, we can prevent the default behavior of when the space key is pressed.

For instance, we write:

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id='app'>

</div>

to add the Vue script and the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `
    <div>
    	<input @keydown.space.prevent>
    </div>
  `,
})

to add an input with the @keydown.space.prevent directive.

@keydown.space.prevent prevents the default behavior when pressing the space key.

Therefore, it’ll prevent space key press from adding a space to the input value.

Conclusion

To disable space in input text with Vue.js and JavaScript, we can prevent the default behavior of when the space key is pressed.