Question

我有一个名为TextInput.vue的组件，并在其中创建了一个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">

我现在想要做的是禁用输入框内的一些空格，以使用户无法使用空格/空格键键入（例如；用户名输入框）

这是我所做的，我尝试使用功能trim()，但似乎仍然无法修复它。

在计算函数中

    computed: {
  value: function() {
    const {valueGetter, valueGetterOptions} = this,
      getter = this.$store.getters[valueGetter];
      value.trim();
    return valueGetterOptions ? getter(valueGetterOptions) : getter;
  },

任何提示都会有所帮助。谢谢。（对不起，我的英语不好）

Answer 1

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

<input @keydown.space="(event) => event.preventDefault()">

或者使其更短（如Sovalina指出的那样）：

<input @keydown.space.prevent>

Answer 2

防止所有输入事件出现空格 - 按键、粘贴或拖放文本：

[root@slave3 ~]# cat 50-server.cnf 
       - 10.x.x.x
       - 4

Answer 3

在这种情况下，您可以使用Regular Expressions

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

或者确保存储的数据没有任何大写字母

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

Answer 4

u可以使用get and set

var inputData = ''

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

如果您使用vuex，只需将inputData更改为您的商店参考网址

Answer 5

@ keydown.native.space对我不起作用。 @ keydown.native.space.prevent做到了。

VueJS-禁用输入文本中的空格

5 个答案: