js与jquery实时监听输⼊框值的oninput与
onpropertychange⽅法
本⽂实例讲述了js与jquery实时监听输⼊框值的oninput与onpropertychange⽅法。分享给⼤家供⼤家参考。具体如下:
最近做过⼀个项⽬,需求是下拉框⾥⾃动匹配关键字,具体细节是实时监听⽂本框 value 值的变化,然后匹配相关内容。
初接项⽬,⾸先想到的是 JQ ⾥的 change,但是马上排除此⽅法,因为 change 是在⽂本框失去焦点时才会触发。曲线救国⼀下,想到⽤ keydown 来解决。其他⼀切还好,只是当不通过键盘操作,⽽是通过⿏标来复制粘贴时,这个事件是⽆法触发的。所以这个⽅法也排除掉了。
然后,查询了⼀些相关资料,发现只有原⽣ js 的 oninput & onpropertychange 符合此要求,接着便去 JQ 的 API ⾥去符合的⽅法,很失望,并未到,但是 bind 确实会绑定类似的事件,那便是 input & propertychange,通过测试,确实是没问题的。
jquery获取下拉框选中值现在将例⼦奉上:
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)
{
}
else //需要⽤addEventListener来注册事件
{
}
希望本⽂所述对⼤家的javascript程序设计有所帮助。