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 相关文章推荐
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
node.js中使用node-schedule实现定时任务实例
Jun 03 Javascript
node.js下when.js 的异步编程实践
Dec 03 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
深入理解jQuery之防止冒泡事件
May 24 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
JavaScript之Map和Set_动力节点Java学院整理
Jun 29 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
vue resource发送请求的几种方式
Sep 30 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 REMOTE_ADDR之获取访客IP的代码
2008/04/22 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
php解析url的三个示例
2014/01/20 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
javascript实现的DES加密示例
2013/10/30 Javascript
js闭包的用途详解
2014/11/09 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
koa-router源码学习小结
2018/09/07 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
使用 node.js 模仿 Apache 小部分功能
2019/07/07 Javascript
layer.confirm()右边按钮实现href的例子
2019/09/27 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
利用python如何在前程无忧高效投递简历
2019/05/07 Python
Python的pygame安装教程详解
2020/02/10 Python
python判断字符串以什么结尾的实例方法
2020/09/18 Python
cookies应对python反爬虫知识点详解
2020/11/25 Python
纽约手袋品牌:KARA
2018/03/18 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
广州某公司软件工程师面试题
2014/12/22 面试题
读书活动总结
2014/04/28 职场文书
大学课外活动总结
2014/07/09 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
无罪辩护词范文
2015/05/21 职场文书
东京审判观后感
2015/06/01 职场文书
会计专业2019暑假实习报告
2019/06/21 职场文书
k8s部署redis cluster集群的实现
2021/06/24 Redis
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
mysqldump进行数据备份详解
2022/07/15 MySQL