js与jquery实时监听输入框值的oninput与onpropertychange方法


Posted in Javascript onFebruary 05, 2015

本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下:

最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容。

初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发。曲线救国一下,想到用 keydown 来解决。其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发的。所以这个方法也排除掉了。

然后,查询了一些相关资料,发现只有原生 js 的 oninput & onpropertychange 符合此要求,接着便去 JQ 的 API 里去找符合的方法,很失望,并未找到,但是 bind 确实会绑定类似的事件,那便是 input & propertychange,通过测试,确实是没问题的。

现在将例子奉上:

JQ:

$('input').bind('input propertychange', function() { 
 //进行相关操作 
});

其中:propertychange 是为了兼容 IE9 以下版本的。

JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:

修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。

修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
修改了 select 元素的选中项,selectedIndex 属性发生变化。
JS:

if(isIE) 
{ 
 document.getElementById("input").onpropertychange = keys(); 
} 
else //需要用addEventListener来注册事件 
{ 
 document.getElementById("input").addEventListener("input", keys, false);
}

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
常见JS验证脚本汇总
Dec 01 Javascript
js密码强度实时检测代码
Mar 02 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
Vue项目安装插件并保存
Jan 28 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 Javascript
moment.js轻松实现获取当前日期是当年的第几周
Feb 05 #Javascript
javascript判断移动端访问设备并解析对应CSS的方法
Feb 05 #Javascript
Javascript数组操作函数总结
Feb 05 #Javascript
Javascript毫秒数用法实例
Feb 05 #Javascript
封装了jQuery的Ajax请求全局配置
Feb 05 #Javascript
node.js集成百度UE编辑器
Feb 05 #Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 #Javascript
You might like
利用 window_onload 实现select默认选择
2006/10/09 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
JSON格式化输出
2014/11/10 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
node.js中module.exports与exports用法上的区别
2016/09/02 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
jQuery实现页面倒计时并刷新效果
2017/03/13 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
JS常见错误(Error)及处理方案详解
2020/07/02 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
Python里隐藏的“禅”
2014/06/16 Python
Python发送http请求解析返回json的实例
2018/03/26 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
初中女生自我鉴定
2013/12/19 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
初三班主任寄语大全
2014/04/04 职场文书
诚信承诺书模板
2014/05/26 职场文书
求职信的正确写法
2014/07/10 职场文书
政协会议宣传标语
2014/10/09 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书