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()方法来达到这一目的。

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

<input
	onBlur={(e) => edit(index, e)}
	onKeyPress={(e) => { e.target.blur() }}
/>
input标签事件总结（vue、H5），获取焦点失去焦点实时监听事件
start_sea的博客
07-31 3万+
input标签事件总结（vue、H5） 一、在Html中input标签的相关事件写法： 1、onfocus（常用） input标签获取焦点事件 2、onblur（常用） input失去焦点事件（触发条件：先获取焦点，再失去焦点触发） 3、onchange input失去焦点并且它的value值发生变化时触发 4、oninput input框输入过程中value值改变时实时触发，及没输入一个字符都会触发 5、onclick input标签type="button"时的点击事件 6、onkeydown inpu
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
行星飞行的博客
07-06 786
在前面两篇文章中，我们花了较大的篇幅介绍的方法，在介绍同步异步时提到，在合成事件中对于更新都是异步，但在原生事件中更新却是同步，这说明在合成事件处理上必定与原生事件存在部分差异，那么本篇文章就来着重介绍中的合成事件，在文章开始之前我们先罗列部分问题：在文章开始前，大家可以先自行思考这些问题，假设这些在面试中遇到，你能回答多少呢？那么本文开始。虽然本文的核心重点是介绍的合成事件，但文章开头既然给了合成事件与原生事件相关对比问题，因此了解原生事件是有必要的，考虑到可能有同学对此类知识存在遗忘，这里做个简单复习。
keydown 回车键 回车事件 多次触发 onblur 失去焦点 事件
07-15 1427
keydown 回车键 回车事件 多次触发 onblur 失去焦点 事件
elementUI按钮失去焦点
qq_34941404的博客
09-05 902
elementUI按钮失去焦点 // 失去焦点 e.target.nodeName === 'BUTTON' ? e.target.blur() : e.target.parentNode.blur() 后续更多待更新…
解决onkeydown和onblur事件的冲突
weixin_33939380的博客
04-22 707
2019独角兽企业重金招聘Python工程师标准>>> ...
vue使用input组件，失去焦点和按下回车键造成二次执行同一方法
我总是词不达意的博客
11-08 4613
vue使用input组件，失去焦点和按下回车键造成二次执行同一方法
vue input输入框 回车提交
01-25
为了实现当用户在一个输入字段内按下回车键时触发特定逻辑或提交表单的功能，可以利用 v-on 指令绑定 keydown 事件并检查 keyCode 是否等于 13（代表 Enter）。下面是一个简单的例子说明如何做到这一点： ```html ...
点击custom时下拉框不关闭，custom选项本身变为一个input，其他选项依然展开，且样式不变。请修改
最新发布
10-28
因此，我们需要在blur事件触发时判断：如果点击的是其他选项，那么custom输入框的blur事件会在选中其他选项之后触发，此时我们不应该将custom输入的值作为选中值。 因此，我们需要修改：在blur事件中，我们不应该...
【移动前端开发必备】：解决浏览器文本框焦点与软键盘冲突的终极策略
![【移动前端开发必备】：解决浏览器文本框焦点与软键盘冲突的终极策略]...随后，文章提出了理论与策略来解决键盘冲突问题，包括设计兼容性良好的用户界面和开发高级交互优化方法。通过对iOS和Android平台下的键盘冲
基于MDN的JS学习笔记
Ethuil的博客
03-01 1572
基于MDN和视频教程的JS学习笔记。
[vue] 解决keyup事件和blur重复调用，触发不同方法
qq_14993591的博客
09-15 1009
在keyup触发的事件中解绑失焦函数，在获得焦点focus事件中绑定失焦函数。解决vue中keyup事件和blur重复调用。
@blur检验数组重复并对重复项加后缀
weixin_44328764的博客
05-12 343
@blur校验数组重复 使用场景 table嵌套input input失去焦点时判断输入的所有值是否有重复项，并对重复项增加01，02，03的后缀 实现效果 JS部分 data(){ return { repeatTime:new Map([]) //记录每一项的重复次数 } } repeatZhName() { // 重复字段的中文名后加_01 for
解决vue中keyup事件和blur重复调用，触发不同方法
qq_40179700的博客
08-26 2341
回车时移除失焦事件，聚焦时绑定失焦事件
防止键盘事件与blur的重复调用
weixin_45435854的博客
12-01 306
防止键盘事件与blur的重复调用 ​ $(‘input’).bind(‘keypress’, function (event) { ​ if (event.keyCode == “13”) { ​ //键盘事件调取blur ​ event.target.blur(); ​ } ​ });
input失去焦点事件与按钮保存事件冲突事件的解决方法
m0_37685031的博客
04-12 2345
在我们实际开发过程中，表单很多的情况下，对每个表单值改变的时候做事件监听，一般都选在失去焦点的时候触发失焦事件，而不是在输入的时候做事件处理，这样会消耗性能或资源，造成页面卡顿什么的。但是失焦触发也有一个问题，就是在输入完，直接点击按钮保存的时候， 按钮的点击事件会失效， 这是因为失焦事件总是优先其它事件先触发，导致输入完成之后点击提交按钮无效。 这里有2种解决方法， 将按钮的点击事件换成mous...
在vb.net 中判断input的press button是Cancel还是OK
zjh608的专栏
06-21 1231
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 554
1) 触摸设备驱动应当只需要注册轴、与轴对应的键值和真正支持的按钮。注册过多的轴或键值可能会迷惑设备分类算法或导致系统不能正确地检测设备的能力。 比如：如果设备驱动报告了BTN_TOUCH键值， Android系统将认为BTN_TOUCH总是被用于指示触摸工具是否真正地接触触摸屏或仅仅在上方盘旋。 2) 单点触摸(Single-touch)设备支持以下Linux输入事件...
input回车触发事件_多好的交互:enter、blur触发相同事件,为啥enter就走了2次
weixin_39535287的博客
12-01 559
解决2次回调 <el-input v-model="input" placeholder="请输入内容" @keyup.enter.native="getList" @blur="getList" > </el-input>「背景」：想开开心心敲代码，没料到一不小心又写了个bug。。。正常的动作就是：每次blur时，如果值有变更就提给咱后段大佬计算一下，然后重新刷新列表...
解决使用失去焦点blur事件时一直触发事件
LoveMyLife
09-05 5678
今天在调试页面时发现一种怪事，打开调试页面，光标移入input中，这时切换页面，过一会再次进入调试页面时，发现弹窗循环出现，经发现是blur事件一直触发，不知为何，解决办法：和change事件一起使用。 $('form').delegate('.input_email','change',function(){ $(this).one('blur',function(){ ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值