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操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
bootstrap模态框关闭后清除模态框的数据方法
Aug 10 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
JavaScript从原型到原型链深入理解
Jun 03 Javascript
JavaScript如何判断input数据类型
Feb 06 Javascript
js实现随机抽奖
Mar 19 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
vue项目支付功能代码详解
Feb 18 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 获取当前访问的url文件名的方法小结
2010/02/08 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php解析xml方法实例详解
2015/05/12 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
js实现select选择框效果及美化
2016/08/19 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
Python 学习笔记
2008/12/27 Python
python多重继承实例
2014/10/11 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
python常用知识梳理(必看篇)
2017/03/23 Python
python3中zip()函数使用详解
2018/06/29 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
django rest framework 自定义返回方式
2020/07/12 Python
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
迟到检讨书400字
2014/01/13 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
工程管理英文求职信
2014/03/18 职场文书
2014年学校工作总结
2014/11/20 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书