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 相关文章推荐
ImageFlow可鼠标控制图片滚动
Jan 30 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 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
简单的php 验证图片生成函数
2009/05/21 PHP
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
python数据类型判断type与isinstance的区别实例解析
2017/10/31 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
django ajax json的实例代码
2018/05/29 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
银行类自荐信
2014/02/04 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
社区党务公开实施方案
2014/03/18 职场文书
保护环境倡议书500字
2014/05/19 职场文书
任命书怎么写
2015/03/02 职场文书
高一英语教学反思
2016/03/03 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
Python实现打乒乓小游戏
2021/09/25 Python