VueJS-禁用输入文本中的空格 [英] VueJS - disable space in input text

问题描述

我有一个名为 TextInput.vue 的组件，并且在其中创建了一个div.

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)

这是我所做的；我尝试使用函数 trim()，但看来我仍然无法修复它.

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

在计算函数中

    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)

推荐答案

您可以直接防止用户在输入字段中添加空格. preventDefault()告诉用户代理，不应像通常那样采取默认操作.

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()">

或者使其更短(如Sovalina指出的那样):

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

<input @keydown.space.prevent>

这篇关于VueJS-禁用输入文本中的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！