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 相关文章推荐
jQuery+ajax实现顶一下,踩一下效果
Jul 17 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
Dec 05 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
JSON相关知识汇总
Jul 03 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
vue数据传递--我有特殊的实现技巧
Mar 20 Javascript
5分钟学会Vue动画效果(小结)
Jul 21 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
在JavaScript中如何使用宏详解
May 06 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
YII实现分页的方法
2014/07/09 PHP
PHP内置加密函数详解
2016/11/20 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
jquery中map函数遍历数组用法实例
2015/05/18 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
javascript判断一个变量是数组还是对象
2019/04/10 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python 使用装饰器并记录log的示例代码
2019/07/12 Python
python读取Excel表格文件的方法
2019/09/02 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
购房意向书范本
2014/04/01 职场文书
竞选生活委员演讲稿
2014/04/28 职场文书
医学生求职自荐书
2014/06/12 职场文书
横幅标语大全
2014/06/17 职场文书
一年级小学生评语大全
2014/12/25 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
MySql 8.0及对应驱动包匹配的注意点说明
2021/06/23 MySQL