【前言】
分享一个jQuery实时监听输入框框值变化的方法,如有误解请指正
【主体】
在做开发时经常需要即时监听输入框值的变化,以便作出即时动作,从而引导浏览者进行后续操作,以此增强网站的用户体验感。刚开始采用onchange,但这种方法往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条件。
接下来向大家介绍一种完美的解决方案:结合 HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。
(1)oninput事件→在用户输入时触发
HTML5 的标准事件,对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用,在内容修改后立即被触发,不像 onchange 事件需要失去焦点才触发。
简单理解:该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发, onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 <keygen> 和 <select> 元素。
(2)onpropertychange: IE下元素属性改变时触发
当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。
字面意思是能够监听property改变的事件,但是onpropertychange监听的是元素的property属性,并不只局限于value,也可以监听其他标准属性值,如:input的name值
(3)onchange:在用户改变输入域的内容后,失焦时执行
需要满足两个条件,1、当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效);2、当前对象失去焦点(onblur);
因此,可以采用以下代码实时监听输入框值变化
$("input").bind("input propertychange change",function(event){ //代码块 });
【拓展】
这里我用的bind来绑定事件,但是当遇到追加的新input标签时,就不能监听了。
怎么解决这个问题呢? 用live代替bind即可, live() 方法用于向尚未创建的元素添加事件处理器
$('input').live('input propertychange change', function(){ //获取input下的所有 <input> 元素,并实时监听用户输入 })
【总结】
(1)oninput: 是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效
(2)从上面表格可以看出,oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发
(3)汇总 onchange onpropertychange 和 oninput 事件的区别
1、onchange 事件与 onpropertychange 事件的区别:
onchange 事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发。
onpropertychange 事件却是实时触发,即每增加或删除一个字符就会触发,通过 js 改变也会触发该事件,但是该事件 IE 专有。
2、oninput 事件与 onpropertychange 事件的区别:
oninput 事件是 IE 之外的大多数浏览器支持的事件,在 value 改变时触发,实时的,即每增加或删除一个字符就会触发,然而通过 js 改变 value 时,却不会触发。
onpropertychange 事件是任何属性改变都会触发的,而 oninput 却只在 value 改变时触发,oninput 要通过 addEventListener() 来注册,onpropertychange 注册方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离)
3、oninput 与 onpropertychange 失效的情况:
(1)oninput 事件:a). 当脚本中改变 value 时,不会触发;b).从浏览器的自动下拉提示中选取时,不会触发。
(2)onpropertychange 事件:当 input 设置为 disable=tru e后,onpropertychange 不会触发。
【简单概括】
(1)onchange,该事件必须由鼠标或者键盘激发
$("xxx").on("change",function(){ alert("变化了"); })
(2)ie有专属的方法,onpropertychange,仅支持ie内核的浏览器,同样必须由鼠标或者键盘激发
$("xxx").on("propertychange",function(){ alert("变化了"); })
(3)ie之外的其他浏览器,比如firefox,opera,提供了oninput,同样必须有鼠标或者键盘激发,若想同时支持ie,firefox等浏览器,可以同时绑定两个事件。
$("xxx").on(" input propertychange",function(){ alert("变化了"); })
如果要监听由脚本而不是键盘引起的input值改变,可以换个思路,既然是脚本引起的值改变,可以在引起变化的脚本处进行相应的操作。
.
相关推荐
主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下
js与jquery实时监听输入框值的oninput与onpropertychange方法.docx
下面小编就为大家带来一篇jquery 实时监听输入框值变化的完美方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在本篇文章里小编给大家整理的是一篇关于jQuery/JS监听input输入框值变化实例内容,需要的朋友们学习下。
如果是在pc端,监听输入框你可能想到focus、blur、hover、onkeyup这些事件,但是如果是在移动端使用使用这些事件用户体验极差,因为你要用户收起键盘并且再点个空白处才生效,甚至还存在很大的兼容差异。那么怎么...
事实监听input输入框内容改变并将input框的值赋值到另外一个id内 * 绑定id为testID 的input框: * $('#testID').myInputListen( { targetHtml_ID:"test123"//需要html到的模块ID }); * targetHtml_ID : ...
资源为一个简单的登陆界面,大写监听绑定在密码输入的输入框上,使用浏览器打开login.html即可查看
效果要通过监听输入框的变化来判断登陆按钮是否可点击。当至少一个输入框为空时登录按钮不可点击。一开始是用的jquery的方法做的,后来发现刷新当前页可以实现效果,但是当经过路由跳转后再回到登陆页后,方法就被...
3.3 实时监听输入框值的变化 3.4 绑定鼠标右键单击事件 3.5 双击不选中文本 3.6 通过单击事件添加或解除绑定 3.7 激活整个div层的单击事件 3.8 鼠标单击实现div的选取 3.9 模拟鼠标单击事件 3.10 设定时间间隔的方法...
基于jquery的类似百度的输入框,有简单的样式
基于jQuery的扫码枪监听。如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展哦
今天小编就为大家分享一篇浅谈监听单选框radio改变事件(和layui中单选按钮改变事件),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
让input框实现类似百度的搜索提示,oninput和onpropertychange事件监听,通过ajax获取json数据
网页上的收藏夹及分享功能代码 带当前时间显示的js日历 JavaScript适时监听输入框值的即时变化 自定义QQ在线状态图片 多种拖放元素功能的Js演示代码 - Ajax四级导航菜单ASP+Access动态版 所属分类:ASP源码 | Ajax...
如果只是一个输入框,要实现就非常的简单了,输入框的内容和数据绑定,给数据加一个监听器就可以了,代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue&...
输入框-自适应宽高(依赖 jquery)-源码 JAVASCRIPT 原生 Dom 实用语句 标签页关闭事件监听 Ajax 中的 XMLHttpRequest 对象详解 奇技淫巧 tslint.json 配置说明 encodeURIComponent 与 Java 的区别 数据结构和算法 ...