在 el-input 中添加 onkeyup 使用中文输入法导致验证失效

已于 2024-06-11 14:04:15 修改
阅读量241 收藏 2
点赞数 2
文章标签： vue.js javascript 前端
于 2024-06-11 13:57:25 首次发布
原文链接：https://blog.csdn.net/qq_45886144/article/details/126206463
版权

由于需求需要对 el-input 添加输入校验，只允许用户输入数字，其他内容输不上去，我采用了在中添加onkeyup="value=value.replace(/[^\d]+/g,'')"来对输入进行校验

οnkeyup="value=value.replace(/[^\d]+/g,'')"

当输入为非数字时会被""替换掉，但是使用中文输入法时，虽然也能过滤非数字，但是过滤之后表单的非空验证不通过

查阅很多资料后改为：

// value.replace前为<el-input>绑定的变量名
@input="value => formData.value=value.replace(/[^\d]+/g,'')"

之前只是将 el-input 中的值替换为空，在中文输入法的情况下替换后，里面的值变为了一个新的变量，表单校验监听不到这个新的变量，所以会不通过校验，更改后将替换后的变量赋给 el-input 绑定的变量，再把它回调给 el-input 的 value，这样就能监听到这个替换后的变量。

针对可输入数字、字母不会有类似的问题，直接可使用

oninput="value=value.replace(/[^a-z0-9_-]+/g,'')"
IT码农-爱吃辣条
关注
el-input限制只能输入数字
zhf_123666的博客
11-11 2368
el-input限制只能输入数字 - 不是不爱睡觉 - 博客园 输入框中限制通常有三种处理方法： 第一种：设置type属性（不推荐） 设置type属性为number，text等等，此方法输入框的后面会有不必要样式出现 <el-input type="number"></el-input> 第二种：在属性中添加onkeyup或者oninput进行正则判断 onkeyup，oninput，onchange各有好坏，在这里，推荐onkeyup，在要求不是太高的系统中可以
el-input中监听键盘事件“回车”和“Tab”
Linzsong的博客
03-30 1458
el-input中监听键盘事件“回车”和“Tab” <el-input @keyup.enter.native="test($event)" @keydown.tab.native="test($event)"> </el-input> <!-- 注意这里的Tab键 要使用 keydown监听，使用keyup监听无效，具体原因，希望有热心的网友给予指正--> test(e) { e.preventDefault(); // 阻止Tab的默认事
oninput引发v-model失效
weixin_45894503的博客
04-20 1147
问题场景 例：在el-input中先输入中文字符,再输入数字,v-model失去监听 <el-input v-model="ruleForm.refundMoney" disabled="disabled" :placeholder="`本次可以退款最高${dataList.canRefundAmount}美元`" oninput="value=value.replace(/[^0-9.]/g,'')" clearable/> 原因分析： v-model本
vue中el-input绑定键盘按键(按键修饰符)
11-20
vue怎么写键盘事件 vue允许将按键值作为修饰符来使用，如监听回车事件，有两种写法，如下代码： <input type="text" @keyup.13="console.log($event)"></input> <input type="text" @keyup.enter="console.log($event)"></input> 但要注意的是：当我们在在el-input采用如上两种写法时，他是不生效的。el-input监听不到键盘事件,原因是element-ui是封装组件，所以el标签属于自定义标签，因此触发不了键盘事件。 解决办法：加上.native原生事件修饰符即可。
el-input的onkeyup解决报错Uncaught ReferenceError: xx is not defined at HTMLInputElement.onkeyup
qq_38769403的博客
04-21 2727
需求：在输入框输入时校验输入字符，中英文时校验方式不同 （languageStatus == 0）中文情况下只能输中文汉字 （languageStatus == 1）英文情况下只能输英文字母，短横线，单引号和空格 初始实现： 众所周知，没有条件判断的时候可以直接用 <!-- 只能输入汉字 --> <el-input v-model.trim="value" onkeyup="value = value.replace(/[^\u4e00-\u9fa5]/g,
input框输入中文时，输入未完成触发事件。Vue中文输入法不触发input事件？
study_way的博客
10-23 2608
前言 在做搜索输入框时，产品期待实时搜索，就是边输入边搜索，然而对于中文输入法出现的效果，不同的产品可能有不同的意见，有的觉得输入未完成也应该触发搜索。但有的却认为应该在中文输入完成后再触发搜索。我发现在vue中通过v-model绑定的输入框的值，确时正常的，在中文输入未完成的时候不会修改value的值。针对这两种情况，分别做了屏蔽输入过程的change事件和vue中触发change事件。毕竟不同的需求有不同的效果，为了满足各种情况，还是都掌握的好。 如何屏蔽中文输入过程的change事件 在输入拼音过程也
elementui el-input正则表达式使用onkeyup事件，只可输入小数类似12.22等
qq_41040413的博客
10-29 1830
<input onkeyup="this.value=this.value.replace(/[^(\d||/.)]/g," ">
el-input针对中文输入状态下，对拼音不进行校验的解决方案
weixin_53879882的博客
04-10 554
compositionstart表明中文输入开始，compositionend表明中文输入结束，isComposing标志正在输入，从而控制输入框的校验在输入拼音时不进行，不在中文输入状态下才校验。
中文输入法不触发onkeyup事件的解决办法
09-04
然而，当用户使用中文输入法时，由于输入过程涉及候选词选择和确认，`onkeyup`事件可能不会像英文输入那样正常触发，导致我们的实时监控功能失效。这个问题在描述中已经明确指出。 为了解决这个问题，开发者通常会...
el-input输入框使用oninput或onkeyup后，v-model双向绑定失效
最新发布
07-03
当在 Vue 中使用 `el-input` 组件并尝试结合 `oninput` 或 `onkeyup` 事件监听器与 `v-model` 双向数据绑定时，可能会遇到一个问题。这是因为 `v-model` 实际上是在底层自动触发 `input` 事件的，而当你手动添加了如...
el-input使用onkeyup校验电话号码的校验并且输入长度只能为11
05-30
在上述代码中，我们使用了`el-input`组件，并绑定了`phone`变量来保存用户输入的值。我们通过`@keyup`事件来监听用户输入，并调用`checkPhone`方法来进行电话号码校验。该方法使用了电话号码校验的正则表达式，如果...
el-input限制只能输入数字（开发小记）
Master_Tang的博客
01-05 3775
输入框中限制通常有三种处理方法 第一种：设置type属性（不推荐） 设置type属性为number，text等等，此方法输入框的后面会有不必要样式出现 <el-input type="number"></el-input> 第二种：在属性中添加onkeyup或者oninput进行正则判断 onkeyup，oninput，onchange各有好坏，在这里，推荐onkeyup，在要求不是太高的系统中可以这样使用 <el-input v-model="fo
中文输入法导致html input的onkeyup事件无法被触发，解决方法
Clement-Xu的专栏
02-22 8863
案例：验证码的input框绑定了一个keyup事件，但是偶尔有客户投诉说登录的时候老是提示验证码无法通过验证。 原因：一开始以为是客户的浏览器没有启用cookie。后来了解到客户使用各种浏览器都有同样的问题，才发现是客户使用了五笔输入法输入验证码，导致keyup事件无法被触发。本地测试可以重现：用搜狗输入法输入英文字母然后回车确定输入。 解决：弃用监听keyup事件，改为监听另外两个事件：in
input输入框限制只能输入数字，然后在输入中文后导致双向绑定失效
lxc的点点滴滴
09-27 969
element input 限制中文、输入中文导致数据报错
Vue el-input 使用@keyup绑定Enter键、上下左右键、删除键
weixin_43484014的博客
04-15 3303
Vue el-input 使用@keyup绑定Enter键、上下左右键、删除键 <el-input v-model="order" @keyup.enter.native="keyUpOperate('enter')" @keyup.up.native="keyUpOperate('up')" @keyup.down.native="keyUpOperate('down')" @keyup.left.native="keyUpOperate('left')"
在el-input中添加onkeyup使用中文输入法导致验证失效
高电平的博客
08-07 2418
之前只是将el-input中的值替换为空，在中文输入法的情况下替换后，里面的值变为了一个新的变量，表单校验监听不到这个新的变量，所以会不通过校验，更改后将替换后的变量赋给el-input绑定的变量，再把它回调给el-input的value，这样就能监听到这个替换后的变量了。由于需求需要对el-input添加输入校验，只允许用户输入数字，其他内容输不上去，我采用了在中添加onkeyup ="value=value.replace(/[ ^ 0-9.]/g,‘’)"来对输入进行校验，......
el-input添加keyup事件无响应_el-input @keyup无效，2024年最新2024前端常见面试题
04-17 562
【代码】el-input添加keyup事件无响应_el-input @keyup无效，2024年最新2024前端常见面试题。
前端输入框校验限制不能输入中文
高先生的猫
05-28 7471
记录自己工作遇到的小小问题 一般我们在做表单的时候都会有表单校验,通常都是用element提供的表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。如下面这样 rules: { name: [ { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, messag
el-input输入框校验
12-09 4791
使用trim修饰符，它是v-的一种修饰符，可以过滤掉内容左右两边的的空格代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值