input的keydown/up/press与blur事件重复触发的解决方法

最新推荐文章于 2024-03-01 22:32:39 发布
原创 最新推荐文章于 2024-03-01 22:32:39 发布 · 1.3k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js #react #html

本文探讨了如何在JavaScript中通过键盘事件处理函数，阻止输入框自动获取焦点，而是手动触发失去焦点事件。实例展示了如何在onKeyPress事件中使用blur()方法来达到这一目的。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

当触发同一个函数时，可以让键盘事件不触发函数，让键盘事件去使input失去焦点，从而触发失去焦点事件，如

<input
	onBlur={(e) => edit(index, e)}
	onKeyPress={(e) => { e.target.blur() }}
/>
@blur检验数组重复并对重复项加后缀
weixin_44328764的博客
05-12 326
@blur校验数组重复 使用场景 table嵌套input input失去焦点时判断输入的所有值是否有重复项，并对重复项增加01，02，03的后缀 实现效果 JS部分 data(){ return { repeatTime:new Map([]) //记录每一项的重复次数 } } repeatZhName() { // 重复字段的中文名后加_01 for
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
行星飞行的博客
07-06 751
在前面两篇文章中，我们花了较大的篇幅介绍的方法，在介绍同步异步时提到，在合成事件中对于更新都是异步，但在原生事件中更新却是同步，这说明在合成事件处理上必定与原生事件存在部分差异，那么本篇文章就来着重介绍中的合成事件，在文章开始之前我们先罗列部分问题：在文章开始前，大家可以先自行思考这些问题，假设这些在面试中遇到，你能回答多少呢？那么本文开始。虽然本文的核心重点是介绍的合成事件，但文章开头既然给了合成事件与原生事件相关对比问题，因此了解原生事件是有必要的，考虑到可能有同学对此类知识存在遗忘，这里做个简单复习。
keydown 回车键 回车事件 多次触发 onblur 失去焦点 事件
07-15 1406
keydown 回车键 回车事件 多次触发 onblur 失去焦点 事件
解决onkeydown和onblur事件的冲突
weixin_33939380的博客
04-22 696
2019独角兽企业重金招聘Python工程师标准>>> ...
vue使用input组件，失去焦点和按下回车键造成二次执行同一方法
我总是词不达意的博客
11-08 4551
vue使用input组件，失去焦点和按下回车键造成二次执行同一方法
[vue] 解决keyup事件和blur重复调用，触发不同方法
qq_14993591的博客
09-15 986
在keyup触发的事件中解绑失焦函数，在获得焦点focus事件中绑定失焦函数。解决vue中keyup事件和blur重复调用。
vue input输入框 回车提交
最新发布
01-25
为了实现当用户在一个输入字段内按下回车键时触发特定逻辑或提交表单的功能，可以利用 v-on 指令绑定 keydown 事件并检查 keyCode 是否等于 13（代表 Enter）。下面是一个简单的例子说明如何做到这一点： ```html ...
【移动前端开发必备】：解决浏览器文本框焦点与软键盘冲突的终极策略
![【移动前端开发必备】：解决浏览器文本框焦点与软键盘冲突的终极策略]...随后，文章提出了理论与策略来解决键盘冲突问题，包括设计兼容性良好的用户界面和开发高级交互优化方法。通过对iOS和Android平台下的键盘冲
基于MDN的JS学习笔记
Ethuil的博客
03-01 1525
基于MDN和视频教程的JS学习笔记。
jQuery详细教程
04-25
下面是 jQuery 中事件方法的一些例子： Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $...
解决vue中keyup事件和blur重复调用，触发不同方法
qq_40179700的博客
08-26 2308
回车时移除失焦事件，聚焦时绑定失焦事件
防止键盘事件与blur的重复调用
weixin_45435854的博客
12-01 295
防止键盘事件与blur的重复调用 ​ $(‘input’).bind(‘keypress’, function (event) { ​ if (event.keyCode == “13”) { ​ //键盘事件调取blur ​ event.target.blur(); ​ } ​ });
input失去焦点事件与按钮保存事件冲突事件的解决方法
m0_37685031的博客
04-12 2277
在我们实际开发过程中，表单很多的情况下，对每个表单值改变的时候做事件监听，一般都选在失去焦点的时候触发失焦事件，而不是在输入的时候做事件处理，这样会消耗性能或资源，造成页面卡顿什么的。但是失焦触发也有一个问题，就是在输入完，直接点击按钮保存的时候， 按钮的点击事件会失效， 这是因为失焦事件总是优先其它事件先触发，导致输入完成之后点击提交按钮无效。 这里有2种解决方法， 将按钮的点击事件换成mous...
在vb.net 中判断input的press button是Cancel还是OK
zjh608的专栏
06-21 1218
From:http://www.developer.com/net/vb/article.php/1541851/VB-TIP-InputBox---OK-or-Cancel.htm Imports System.Runtime.InteropServices s_return = Microsoft.VisualBasic.Interaction.InputBox("请输入ClassID，中
input 输入事件
qq_43248127的博客
04-24 530
1) 触摸设备驱动应当只需要注册轴、与轴对应的键值和真正支持的按钮。注册过多的轴或键值可能会迷惑设备分类算法或导致系统不能正确地检测设备的能力。 比如：如果设备驱动报告了BTN_TOUCH键值， Android系统将认为BTN_TOUCH总是被用于指示触摸工具是否真正地接触触摸屏或仅仅在上方盘旋。 2) 单点触摸(Single-touch)设备支持以下Linux输入事件...
elementUI按钮失去焦点
qq_34941404的博客
09-05 883
elementUI按钮失去焦点 // 失去焦点 e.target.nodeName === 'BUTTON' ? e.target.blur() : e.target.parentNode.blur() 后续更多待更新…
解决使用失去焦点blur事件时一直触发事件
LoveMyLife
09-05 5637
今天在调试页面时发现一种怪事，打开调试页面，光标移入input中，这时切换页面，过一会再次进入调试页面时，发现弹窗循环出现，经发现是blur事件一直触发，不知为何，解决办法：和change事件一起使用。 $('form').delegate('.input_email','change',function(){ $(this).one('blur',function(){ ...
focus、input、keydown、keyup、change、blur方法的差异
chongtuo8278的博客
01-07 613
当输入框的值发生变化时，我们可以通过keydown、keyup、input、onchange、blur事件观察到其值的变化，但它们的应用时机与应用场景存在显著的差异。 // <input type="text" id="username"> var username = do...
常用的ADB命令
black_bird_cn的博客
04-17 3317
写在前面的话 其实关于adb命令的技术博文已经很多而且有些写的很全面的，但我之所以字在重复写一遍[而且内容不全]并不是想“狗尾续貂”，只是最近有一次忽然发现，以前用过的很多命令有些忘记了，平时想不起来直接度娘了。现在忽然感觉有必要记一下，虽然有点晚，但总比停下来强一些，写一遍也让自己对adb命令有个新的认识。以下所有的adb命令全部是本人在工作中使用过或者自己平时使用过的，如有记录出错或者错误望...
VisualBasic6.0教程：KeyPress事件与KeyDown/KeyUp事件解析
KeyDown和KeyUp事件则分别在按下和释放键盘键时触发，其中KeyCode参数提供按键的扫描代码，标识用户按下的物理键。VisualBasic6.0是一个基于Basic的可视化编程语言，以其易学易用、功能强大和高效率著称，支持面向...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值