@keyup.enter.native事件和中文输入法状态下输入的英文产生的冲突。

最新推荐文章于 2023-04-26 14:40:21 发布
置顶 最新推荐文章于 2023-04-26 14:40:21 发布
阅读量1k 收藏 1
点赞数 4
分类专栏： 前端开发 Vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42483780/article/details/103471457
版权
前端开发 同时被 3 个专栏收录
17 篇文章 0 订阅
订阅专栏
Vue
10 篇文章 0 订阅
订阅专栏
js
8 篇文章 0 订阅
订阅专栏

在改bug的时候遇到测试提交的一个bug，拼音输入admin，敲击回车键选择英文admin时，页面提示账号密码错误。
代码：

有bug的
 <el-input v-model="formLogin.username" placeholder="输入账号" @keyup.enter.native="submitForm('formLogin')">
修改之后的
 <el-input v-model="formLogin.username" placeholder="输入账号" @keypress.enter.native="submitForm('formLogin')">
拳击俱乐部
关注
  • 4
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
输入法的回车与消息发送快捷键回车的冲突解决方法
12-10
问题：在中文输入法输入文字时按ENTER键；绑定keyup事件会将输入法中的英文文字输入到文字框并直接触发发送按钮 键盘事件： 当一个按键被pressed或者released，在每一个浏览器中都可能会触发三种键盘事件 keydown keypress keyup keydown事件发生在按键被按下的时候，接着触发keypress，松开按键的时候触发keyup事件 中文输入法： firfox：输入触发keydown，回车确认输入触发keyup chrome：输入触发keydown、keyup，回车确认输入只触发keydown IE：输入触发keydown、keyup，回车确认输入触发keydow
vue中@keyup.enter.native输入法的回车与消息发送快捷键回车的冲突解决
chi1130的博客
12-24 1万+
问题 当你在中文输入法下输入然后回车后，发现表单提交了。 代码 &amp;amp;lt;el-col :span=&amp;quot;14&amp;quot;&amp;amp;gt; &amp;amp;lt;el-input type=&amp;quot;text&amp;quot; v-model=&amp;quot;loginForm.content&amp;quot; autocomplete=&amp;quot
火狐浏览器@keyup.enter.native在中文输入法状态下输入的英文enter后出现的问题
weixin_50535566的博客
02-19 822
火狐浏览器@keyup.enter.native在中文输入法状态下输入的英文enter后出现的问题 问题描述：在登录页面按enter键触发登录事件，火狐浏览器出现问题，输入法在中文模式下输入字符enter之后触发了登录事件，报验证码错误，将@keyup修改为@keypress // 有问题的代码 <el-form @keyup.enter.native="handleLogin"></el-form> // 修改后的的代码 <el-form @keypress.enter.na
vue中模糊搜索keyup在中文输入法下输入英文无效的解决方法
Oralinge
08-21 2764
keyup事件在中文输入法下输入英文，vue中对应的val属性值为空。控制台显示并没有获取到任何值，但是input中确实有字母。纳尼？说好的双向绑定呢？ 要解决这个问题可以采用watch+keyup事件的方法。 watch首先可以解决keyup失效的问题，可以检测到值的变化。但是也因此产生了问题，当点击下拉列表里的问题输入进input框的时候，watch会再一次检测到值的变化，重复调用接口。...
火狐浏览器按回车键发送信息和中文输入法按回车确定存在冲突怎么解决？
weixin_45613604的博客
05-06 423
百度有说是把keyup换成keydown
@keyup.enter.native不生效问题解决
RD_Xiaobai的博客
02-01 3135
输入框回车事件失效@keyup.enter.native不生效问题解决。
vue element-ui el-input输入框绑定@keyup.enter回车事件无效
fangqi20170515的博客
11-21 5189
由于element-ui把input进行了封装，input外面是多一层div的。所以对于el-input，使用 @keyup.enter是无效的，需要加上。或者也可以直接input标签。
el-input设置了type=“number“还能输入e和中文输入光标上移的问题记录
最新发布
Hassan的小博客!
04-26 1714
el-input设置type="number"可以输入e，输入中文光标上移等
vue实现给div绑定keyup的enter事件
10-15
在这个案例中，重点是实现`keyup.enter`事件，即当用户按下回车键时触发的事件。然而，Vue的事件绑定语法默认不支持直接在`div`上绑定`keyup.enter`，因为`div`元素不直接支持`keyup`事件。下面我们将详细介绍如何在...
vue element-ui 绑定@keyup事件无效的解决方法
12-29
解决办法： ...加上.native覆盖原有封装的keyup事件即可。 以上这篇vue element-ui 绑定@keyup事件无效的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
回车触发事件的方法 ( @keyup.enter.native )
书山有路勤为径，学海无涯苦作舟
12-20 519
methods：{ aaa（）{ console.log(“按了回车按键”); } }
@keyup.enter.native和@click.native.prevent是什么意思
NSX-Truth
07-19 1万+
@keyup.enter.native和@click.native.prevent是什么意思 一、 @keyup.enter.native 一般vue的监听组件，是这样写 <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> 但是， 如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native <el-input v-model="account" placeholder="
表单里的默认enter方法
qq_44473483的博客
07-04 157
今天做vue项目，里面使用了一个input组件，原本想按enter按键之后执行自定义方法，但是发现点击enter按键时会默认自动刷新页面，找了很久才明白原因，特此记录一下 在html里面，如果form里面只存在一个input标签，那么系统会默认会给enter按键绑定上submit方法。如果未定义提交的路径，就会自动刷新页面。所以在vue里使用el-from组件，如果只有一个input标签，那么就会出现enter刷新清况。 解决方法如下： 第1步.@submit.native.prevent 在form标签上
Uni App input 手机键盘回车搜索
cainiao1412的博客
09-05 2130
然后设置 @confirm 事件，而非 @keyup.enter.native。首先将input的confirm-type设置为search。
vue 监听键盘回车事件 @keyup.enter || @keyup.enter.native
热门推荐
Kuroko's Development Notes
05-18 13万+
vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符： &lt;input v-on:keyup.13="submit"&gt; vue还非常贴心地给出了常用按键的别名，这样就不必去记keyCode ~ ~ 上面代码，还可以在这样写：   &lt;input v-on:keyup.enter="submit"&gt; &lt;input @keyup.enter="submit...
@keyup.enter.native不生效？看看@keyup.enter.native和@keyup.enter的区别和使用
南极修炼千年的大冰块
07-23 7878
vue中特殊的键盘修饰符，不必去记特定的keyCode： @keyup.13 == @keyup.enter @keyup.9 == @keyup.tab @keyup.46 == @keyup.delete (捕获 “删除” 和 “退格” 键) @keyup.27 == @keyup.esc @keyup.32 == @keyup.space @keyup.38 == @keyup.up @keyup.40 == @keyup.down @keyup.37 == @keyup.left @keyup.39
unipp app端使用地图进行定位、打点、导航、路线规划
qq_42483780的博客
05-27 1万+
uniapp地图导航、定位、打点、路线规划
@keyup.enter.native 和@keyup.enter区别
04-13
@keyup.enter.native 是在组件的模板中使用的一个特殊指令，它是原生的键盘事件监听器，可以监听键盘按下事件，而@keyup.enter则是Vue中的指令，可以用于绑定键盘事件，也可以监听键盘按下事件。区别在于@keyup....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值