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)

For Headless UI (Tailwind CSS Labs), this may be relevant: github.com/tailwindlabs/headlessui/discussions/820 (use stopPropagation to prevent keystrokes from bubbling up). — ADTC
– ADTC, Commented Feb 7, 2023 at 6:46

Penny Liu · Accepted Answer · 2022-04-05 14:07:48Z

53

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>

edited Apr 5, 2022 at 14:07

Penny Liu

17.9k5 gold badges89 silver badges109 bronze badges

answered Nov 28, 2018 at 14:42

Jns

3,2871 gold badge20 silver badges25 bronze badges

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

6 Comments

Sovalina Over a year ago

you also can write like this: <input @keydown.space.prevent>. Your answer is very clever btw

Jns Over a year ago

Thanks for the advice!

1aliff Over a year ago

oh yea! i knew it can be done something very simple like this! but i really had no idea. I tried both of the code, both are actually do the job. Thanks a lot! :)

Lukasz Wiktor Over a year ago

Does not prevent from pasting text with spaces.

yogithesymbian Over a year ago

when we tried spam space its input dot on input , did u know why ?

|

Igor · Accepted Answer · 2021-05-19 07:10:35Z

4

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"/>

edited May 19, 2021 at 7:10

answered Mar 25, 2021 at 10:04

Igor

1,3511 gold badge25 silver badges36 bronze badges

Comments

Nancy · Accepted Answer · 2019-02-26 23:51:10Z

3

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

answered Feb 26, 2019 at 23:51

Nancy

615 bronze badges

1 Comment

fredrivett Over a year ago

this will be because you're using it on a custom component, but it's a good point for those that are confused as to why this isn't working

Moumen Soliman · Accepted Answer · 2018-11-28 14:32:40Z

2

In this case, you can use Regular Expressions

value.replace(/\s/, '')

or to be sure the data is stored without any capital letters

value.replace(/\s/, '').toLowerCase()

answered Nov 28, 2018 at 14:32

Moumen Soliman

1,6941 gold badge17 silver badges21 bronze badges

Comments

Johnny · Accepted Answer · 2018-11-28 14:43:07Z

0

u could use get and set

var inputData = ''

export default {
    name: 'yourFromComponent',
    computed: {
        inputValue: {
            get () {
                return inputData
            },
            set (value) {
                inputData = value.replace(/\s/g,'')
            }
        }
    }
}

if you use vuex just change the inputData to your store referenz

answered Nov 28, 2018 at 14:43

Johnny

2052 silver badges13 bronze badges

Collectives™ on Stack Overflow

VueJS - disable space in input text

5 Answers 5

6 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related