输入框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——做禁止字符输入限制时，使用拼音未确定时英文字母上屏相关推荐

小狼毫（Rime）输入法设置Shift直接上屏英文字符并切换为英文状态方法
小狼毫默认输入方式下,左Shift键只切换为英文,右Shift键直接上屏中文.这对于用惯了搜狗的人来说在进行中英文混输的时候经常出错,特别影响效率,接下来提供方法解决这个问题. 一.控制面板找到小狼毫 ...
input仅输入数字且不会偷偷带小尾巴（input里没有，等取值时发现多了一个最后点击的英文字母☺️）
<input class="num_input" type='number' pattern="[0-9]*"/> 优点是不会在取值时发现最后点击的 ...
解决 input 输入框在中文输入法下的 bug
最近本山人在项目的开发过程中遇到这么一个问题: 在列表中嵌入antd的Input输入框,切换到微软输入法输入时,就不能成功输入中文字符,然而搜狗输入法又是正常的. 研究一番,发现是input的valu ...
移动端input“输入框”常见问题及解决方法
移动端input"输入框"常见问题及解决方法参考文章: (1)移动端input"输入框"常见问题及解决方法 (2)https://www.cnblogs.co ...
解决React中input输入框在中文输入法下的bug
解决React 中input 输入框在中文输入法下的bug 需求:封装Input 组件,输入拼音过程中不触发onChange,拼音输入结束后触发onChange 原理:input 标签上面有两个事件, ...
html输入框限定字符,input框禁止输入特殊字符@#!$%^*()_+e
input框禁止输入特殊字符@#!$%^&*()_+e input type = number 我的解决方案: processSpelChar: function (){ var code; ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
javascript监听输入框_html通过JS/jQuery实现实时监听输入框input的内容
最近在做一个功能:联想搜索功能.具体实现做法如下:通过实时监听输入框input的内容,来实时发起网络请求,向后台获取联想到的搜索内容并展示到前台.那么该如何实现input的实时监听呢做法一(jQue ...
文本输入框input实现字母大小写转换
文本输入框input实现字母大小写转换,方法有两种: 1.通过js的onkeyup实现字母大小写转换 <input type="text" onkeyup="thi ...

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

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

最新文章

热门文章