Prevent white space in the input

I need to prevent blank spaces in my input text.

I’m doing this: @keydown.space.prevent

But that doesn’t work for mobile users.

How can I solve this?

You can do a custom handler @input="updateData"

methods: {
  updateData(input) {
    this.dataValue = input.replace(' ', '');
  },
}

The replaces all spaces with nothing.

It’s not just mobile. On desktop you also need to consider other ways to change the value, such as copy/paste and drop/drop.

There are other problems too. If someone manages to input a space it can easily be stripped from the data but that won’t trigger a re-render unless the value has changed.

Then there’s selection/cursor position to consider. Updating the value can cause the cursor to jump to the end of the input, even if the user was interacting with text earlier in the input.

I’ve had a go at implementing something that considers all of those cases here:

https://jsfiddle.net/skirtle/67rwmbLz/1/

The example is Vue 2 but it will also work in Vue 3 with the appropriate migration tweaks.