input回车事件不执行失焦事件

2024-11-08

解决input的回车enter和失焦blur冲突问题：实现回车保存，blur还原编辑内容功能

最近做项目遇到: 背景:点击单元格,easyUI自动生成input可编辑框. 问题点:input的回车enter和失焦blur冲突问题:实现回车保存,blur还原编辑内容功能要实现需求: 1.回车键保存编辑内容 2.input框失去焦点后,不保存编辑内容,还原为原来内容. 如下图所示: 编程中遇到的棘手问题: 按下回车后,保存不了编辑的内容.原因是按下回车,先触发input框的blur事件(此时导致编辑内容被还原,保存不了内容),才触发回车事件. 经过多方尝试,摸索出一下解决办法,终于解决回车

解决jquey中当事件嵌套时,内层事件会执行多次的问题

出现情景:当内层事件需要外层事件触发后产生的一些值得时候情景复现: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq

js事件【续】(事件类型)

一.UI事件[使用时需要添加on eg: onload 页面加载完成事件]load [一张页面或一幅图像完成加载]页面加载后触发的事件,即进入页面后 unload [用户退出页面]页面卸载后触发的事件,即离开页面时(firefox不支持) select [文本被选中]当用户选择文本框(<input>,<textarea>)中的一个或多个字符时 resize [窗口或框架被重新调整大小]当浏览器窗口被调整到一个新的高度或者宽度时,会触发 scroll当用户滚动

jq on绑定事件off移除事件

https://www.cnblogs.com/sandraryan/ 以前用的是bind(); 后来更新后用的on (on() 方法是 bind().live() 和 delegate() 方法的新的替代品) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content

jquery回车执行某个事件

这里用到的是在查询框中输入数据后直接回车直接查询. //回车执行查询事件(执行class='btn-query'的单击事件) $(document).keydown(function (event) { if (event.keyCode == "13") { //回车执行的事件 $(".btn-query").click(); return; } }); 这样写后就基本可以实现回车查询了,但在一些情况下存在问题,就是我们的数据是写在一个form中的,并且该form

JS事件失焦事件（onblur）onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序。

失焦事件(onblur) onblur事件与onfocus是相对事件,当光标离开当前获得聚焦对象的时候,触发onblur事件,同时执行被调用的程序. 如下代码, 网页中有用户和密码两个文本框.当前光标在用户文本框内时(即焦点在文本框),在光标离开该文本框后(即失焦时),触发onblur事件,并调用函数message(). 运行结果: 任务补充右边编辑器第13行,当光标从密码文本框离开时,触发onblur 事件,调用message()函数. <!DOCTYPE HTML> <html&g

input 的blur事件之后button的onclick事件不执行解决方案

最近发现网页程序中有个BUG,就是在input标签输入框中输入完数据后,直接点击“取消” 按钮的时候.出现网页崩死的情况: 经过小主酸菜我,各种方法的尝试后,找到一个初步可以解决的方案,在这里分享给大家: 首先,分析一下原因:input标签直接离开后,触发的事件是input标签的blur事件:然后直接去点击了取消按钮,执行button事件. 由于js是单线程的所以就出现了问题,现在需要让blur先执行验证,然后在触发click事件. 所以:咱们的解决方案就是,要让他blur事件先验证了,然后再执

ASP.NET多个Button的页面，回车执行按钮事件（转）

主要有两种实现方法分别是:JavaScript的方法与Panel的方法一.JavaScript的方法 ①单输入框(文本框)单按钮的实现方法以下功能实现:在输入框中输入内容之后,按回车键就执行按钮事件! 在.aspx页面的Head区域中添加: <SCRIPT LANGUAGE="javacript"> function SubmitKeyClick(button) { if (event.keyCode == 13) { event.keyCode=9; event.re

jquery用一个事件控制另一个事件是否执行（不是删除事件）

想用click事件控制mouseover事件的执行,如果用删除绑定mouseover事件以后就不能再使用mouseover了,于是只需要设置一个全局变量,并赋值false,当点击click事件,将全局变量设置成true,然后在mouseover中作全局变量的判断,来决定是否执行mouseover事件中的函数. <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8&qu

原生js事件和jquery事件的执行顺序问题

场景:近日,写前端页面时候,在针对输入框input操作时,用到了jquery的插件,插件中使用了jquery的focus()和blur()方法.但是同时,又需要在插件之外再针对输入框的获取焦点和失去焦点进行一些一些逻辑操作. 思路一:改写插件,使用回调函数或初始化函数. 原来的插件并没有使用回调函数或初始化函数.可以改写插件,增加回调函数或初始化函数,视情况,在原来逻辑执行之前或之后先执行逻辑操作. 思路二:使用原生js事件. 开始的时候并没有这个思路,但是由于原生js事件函数onfocus()

消除点击连接或者按钮或者执行onclick事件时出现的边框

css中添加 *:not(input) { font-family: sans-serif; font-size-adjust: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0)} 既可以消除点击连接或者按钮或者执行onclick事件时出现的边框

label上的事件操作执行两次

label上的事件执行两次标签(空格分隔): 事件执行两次今天在做公司项目的过程中,需要在表单元素单选框上绑定事件,执行相应的操作,结果发现事件执行了两次具体代码: <div class="radio"> <label roleid="24"> <input type="radio" checked="" value="option1" id="optionsR

type=file的change事件只能执行一次的解决方案

最近帮朋友做个项目中遇到了type=file change事件只能执行一次的问题,度娘了一下,发现提供了各种解决方案,所以决定记录一下我的思考方向和最终解决方式. 起初帮朋友做个项目,项目中遇到上传文件,没想太多,代码就敲了起来,尼玛,上传做好啦,兴冲冲,一测,ei,怎么回事,怎么不能上传了,程序员的各种抓狂捉急啊,开始度娘找解决方案,找来找去,冷静下来,自己想了解决方案: 蛋疼的<input type='file' />设计,不管文件上传成功与否,已添加的文件已经被记录了,所以不会再执行ch

thinkphp模型事件（钩子函数：模型中在增删改等操作前后自动执行的事件）

thinkphp模型事件(钩子函数:模型中在增删改等操作前后自动执行的事件) 一.总结 1.通过模型事件(钩子函数),可以在插入更新删除等前后执行一些特定的功能 2.模型事件是写在模型里面的,控制器中也必须用了模型操作数据库才能触发模型事件 3.模型事件是需要注册的,注册了才能使用,可用init统一注册 4.支持传入一个参数,(当前的模型对象实例),也就是你传到模型中的数据,也就是你传到数据库中的数据实例:图片上传模型: <?php namespace app\admin\model; us

input中blur失去焦点事件与点击事件冲突时如何解决

方法一使用setTimeout $(function(){ $(".cy-name-input input").on({ focus:function() { $(".cy-close").css('display','block'); }, blur:function() { setTimeout(function(){ $(".cy-close").css('display','none'); },0) } }) $(".cy-c

JS事件鼠标经过事件（onmouseover）鼠标经过事件，当鼠标移到一个对象上时，该对象就触发onmouseover事件，并执行onmouseover事件调用的程序。

鼠标经过事件(onmouseover) 鼠标经过事件,当鼠标移到一个对象上时,该对象就触发onmouseover事件,并执行onmouseover事件调用的程序. 现实鼠标经过"确定"按钮时,触发onmouseover事件,调用函数info(),弹出消息框,代码如下: 运行结果: 任务补充右边编辑器第13行,当鼠标经过"确定"按钮后,调用message()函数,弹出消息对话框. <!DOCTYPE HTML> <html> <head

C#固定时间执行指定事件（观察者模式+异步委托）

最近有个项目需要每天固定的时间去执行指定的事件,发现网上关于这样的文章比较少,而且比较散.通过学习了几篇文章后终于实现了这个功能,在此也特别感谢这些文章的作者们,这也是我第一次在园子里面发文章,望多指教. 关于观察者模式,我在这里就不做讲解了,如有不懂,可以参考相关文章. 那么开始入正题. 主要有三个页面:Observer.cs(观察者).Subject.cs(通知者).Form1.cs Observer.cs class Observer { /// <summary> /// 执行事件A

C#中WinForm窗体事件的执行次序

C#中WinForm窗体事件的执行次序如下: 当 Windows Form 应用程序启动时,会以下列顺序引发主要表单的启动事件: System.Windows.Forms.Control.HandleCreated System.Windows.Forms.Control.BindingContextChanged System.Windows.Forms.Form.Load System.Windows.Forms.Control.Vis

jQuery在HTML文档加载完毕后自动执行某个事件；

原来onchange=“fucntionname(parms)”: <select name="country" id="selCountries_{$sn}" onchange="region.changed(this, 1, 'selProvinces_{$sn}')" style="border:1px solid #ccc;"> <option value="0">{$lan

为什么Jquery对input file控件的onchange事件只生效一次

今天在做jquery对input file控件的onchange事件进行监听,就一直只生效一次,不知道Jquery为什么对file控件没有做到每次改变触发onchange事件的效果,但是还是有好几种解决方法的: 1.原始方法:把事件写在file控件的onchange=""里面: 2.Jquery方法一: $('#fileId').live('change',function(){ //逻辑添加.... }); 3.Jquery方法二: onchange后,生成一个新input type

JQ避免出现多次执行一个事件的解决方案

点击按钮之后会多次执行一个事件的话,就在方法结尾加入如下代码,这样的话事件就可以只执行一次了 //避免出现多次执行事件的问题 event.stopPropagation(); 此外,时间的重复绑定也有可能导致出现此问题,解决方法就是在方法开始的时候(以easyui的window的before方法为例)先清除标签的事件,然后在进行下面的重新绑定事件执行方法,如以下代码: //首先初始化解除时间帮顶防止时间重复绑定重复执行事件内容 $('#btnAdd').unbind('click'); $('#

input回车事件不执行失焦事件

热门专题