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

【问题标题】：VueJS - disable space in input textVueJS - 禁用输入文本中的空格
【发布时间】：2018-11-28 14:26:30
【问题描述】：

我有一个名为 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;
  },

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

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

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

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

或者让它更短（正如Sovalina 指出的那样）：

<input @keydown.space.prevent>

【讨论】：

你也可以这样写：<input @keydown.space.prevent>。顺便说一句，您的回答非常聪明
感谢您的建议！
哦，是的！我知道它可以做一些非常简单的事情！但我真的不知道。我尝试了这两个代码，两者实际上都可以完成工作。非常感谢！ :)
不阻止粘贴带有空格的文本。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

这将是因为您在自定义组件上使用它，但对于那些对为什么它不起作用感到困惑的人来说这是一个好点

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

你可以使用get和set

var inputData = ''

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

如果您使用 vuex，只需将 inputData 更改为您的商店引用

【讨论】：