输入框input三方禁止输入方法及bug——做禁止字符输入限制时，使用拼音未确定时英文字母上屏

做input框输入限制时碰到的一个坑:

一般做禁止输入限制时有这么几种方式：

利用onkeyup onkeydown，判断输入的值，如果出现不能输入的字符，则马上利用正则替换成null。表现形式为这个字符跳一下出现一瞬间又消失。
```
    
    <el-input v-model="input" onkeyup="this.value = value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" />
```
添加在submit事件或者blur事件中，检验输入的value值，如果包含禁输内容，则跳出提示框。检验方式也可选择正则，检验少数的特殊字符，也可用数组。

 <template>
  <div>
    <el-input v-model="input" @blur="check" />
  </div>
</template>


<script lang="ts" setup>
const input = ref()

const check = (value: string) => {
  let arr = ['<', '>', '|', '!']
  arr.forEach((it) => {
    if (value.includes(it)) {
      ElMessage({
        message: '包含非法字符',
        type: 'warning',
      })
    }
  })
}

</script>

3.禁止输入，输入禁输入字符无反应。

<template>
  <div>
    <el-input v-model="input" @oninput="checkFormat" />
  </div>
</template>

<script lang="ts" setup>
const checkFormat = (value: string) => {
  return value.replace(/[^0-9A-Za-z\u4e00-\u9fa5]*/g, '')
}
</script>

此时，我发现方法1会出现一个bug

如图，在没有按下确定的时候，英文字母就会自动上屏，确定以后就会变成这样：

解决办法：改用方法三即可

输入框input三方禁止输入方法及bug——做禁止字符输入限制时，使用拼音未确定时英文字母上屏

猜你喜欢