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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
js调用css属性写法
Sep 21 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
Jun 17 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
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
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PHP生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
2020/11/06 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python使用Supervisor来管理进程的方法
2015/05/28 Python
python处理二进制数据的方法
2015/06/03 Python
常用python编程模板汇总
2016/02/12 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
Python中扩展包的安装方法详解
2017/06/14 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Python连接Redis的基本配置方法
2018/09/13 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
Python进程间通信multiprocess代码实例
2020/03/18 Python
python 如何设置守护进程
2020/10/29 Python
文秘大学生求职信
2014/02/25 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
基层党组织建设整改方案
2014/09/16 职场文书
2014幼儿园卫生保健工作总结
2014/12/05 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
致三级跳运动员加油稿
2015/07/21 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书
Python实现Hash算法
2022/03/18 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang