Vue.js -如何允许用户在输入框中只输入字母?

66bbxpm5  于 2023-06-06  发布在  Vue.js
关注(0)|答案(3)|浏览(344)

我有一个输入字段,我们称之为firstName。我想让用户只输入字母和撇号。没有数字和其他特殊符号。逻辑是这样的:
1.在@keydown上,某个方法(我们称之为“checkName()”)获取一个类型化字符。
1.然后它检查这个符号是否属于类似**[A-z]的东西。如果属于,则该方法不执行任何操作。如果不是-该方法将其替换为''。(还需要在这个检查数组中添加一个撇号**,让用户也可以键入它)。
我怎么能认识到这一点?我已经找了一些Vue验证器和掩码,但还没有找到我需要的东西。验证器只检查输入字段,掩码套件更好,但必须有一个固定的字符串范围。
有什么想法吗?或者一切都很简单而我把它复杂化了?

oyxsuwqo

oyxsuwqo1#

如果你希望用户只能输入字母,那么你可以执行v-on:keypress并检查事件函数。

<input type="text" v-model="firstName" v-on:keypress="isLetter($event)">

则该方法:

isLetter(e) {
  let char = String.fromCharCode(e.keyCode); // Get the character
  if(/^[A-Za-z]+$/.test(char)) return true; // Match with regex 
  else e.preventDefault(); // If not match, don't add to input text
}

示例如下:https://codesandbox.io/s/festive-buck-hm4fd?file=/src/App.vue
如果还希望允许撇号,可以将正则表达式模式更改为^[A-Za-z\']+$
我还添加了计算属性来检查输入值是否有效,以防您仍然希望允许用户输入字母以外的内容并显示错误

3phpmpom

3phpmpom2#

那么,当HTML为你做这些的时候呢?

<input type="text" pattern="[a-zA-Z]+">
ef1yzkbh

ef1yzkbh3#

虽然Owls很好地解决了这个问题,但我认为重要的是要注意,当涉及到键盘输入时,您不希望打破浏览器的默认设置。
你不想打破制表符,删除和退格键和其他可能的功能。

onKeyDown(index, event) {
      // Let the browser use its defaults for things like tab.
      if (event.key.length !== 1) return

      // Define your own predicate.
      if (isIgnored(event.key)) event.preventDefault()
    },

我遇到了这个问题时,试图使一个数字的可访问版本只输入。

相关问题