Vue JS - 如何限制输入字段中的特殊字符？

Question

在 Vue JS 中实现文本字符限制的最佳方法是什么？我希望通过 RegExp 实现，以便不允许用户在字段中键入符号。

原文由 vinoth 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我使用两管齐下的方法：

首先是将 watch 或 computed 值与 setter 一起使用，如 Daniel 在上面推荐 的那样。除了处理键盘输入外，它还通过拖放、粘贴或用户想到的任何其他方式处理输入。

第二个是 keydown 处理程序。仅使用监视值时，UI 中会有轻微延迟。被限制的字符在被删除之前会短暂显示。为了获得更无缝的用户体验， keydown 侦听器取消无效输入的键盘事件。

 new Vue({
  el: "#app",
  data: {
    name: "",
  },
  watch: {
    name(val) {
      this.name = val.replace(/\W/g, "");
    },
  },
  methods: {
    nameKeydown(e) {
      if (/^\W$/.test(e.key)) {
        e.preventDefault();
      }
    },
  },
});

 html {
  font-family: sans-serif;
}

.demo {
  display: flex;
  justify-content: space-between;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<main id="app">
  <p>Try typing spaces, punctuation, or special characters into each box to see the difference made by the key handler.</p>
  <div class="demo">
    <div>
      <div>Without key handler:</div>
      <input type="text" v-model="name" />
    </div>
    <div>
      <div>With key handler:</div>
      <input type="text" v-model="name" @keydown="nameKeydown($event)" />
    </div>
  </div>
</main>

原文由 gilly3 发布，翻译遵循 CC BY-SA 4.0 许可协议