时间戳

首页 > 解决方案 > VueJS - 禁用输入文本中的空格

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

问题描述

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

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

标签： javascriptvue.js

解决方案

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

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

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

<input @keydown.space.prevent>

推荐阅读