首页 > 解决方案 > 只允许在输入中写字母

问题描述

我正在尝试在输入中只能写字母而不能写特殊字符或数字,现在我已经成功了,除非我写“`”或“´”它们继续被写。我怎样才能阻止它们出现?

这就是我所做的

https://codesandbox.io/s/kind-cannon-vccjb?file=/src/App.vue:0-699

标签: javascriptvue.jsvuejs2

解决方案


您的代码对我来说似乎工作正常,但它只处理键盘按下并且在您粘贴时不起作用。
更好的方法是验证输入并在输入值更改时修复它,@input因为您已经将结果绑定到this.firstname.

<template>
  <div id="app">
    Only letter
    <input type="text" v-model="firstName" @input="prueba" />
    <br />
  </div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    firstName: "",
  }),
  methods: {
    prueba() {
      //this will replace every non letter input with an empty string leading to removing it
      this.firstName = this.firstName.replaceAll(/[^a-zA-Z]/g, "");
      //you can also do your uppercase change here, no need to do it in update
      this.firstName = this.firstName.toUpperCase()
    },
  },
};
</script>

请注意,您也可以将两条线合二为一,例如

this.firstName = this.firstName.replaceAll(/[^a-zA-Z]+/g, "").toUpperCase();

推荐阅读