js与jquery实时监听输入框值的oninput与onpropertychange方法
更新时间：2015年02月05日 11:08:45 作者：喵小夕
这篇文章主要介绍了js与jquery实时监听输入框值的oninput与onpropertychange方法,实例分析了oninput与onpropertychange实现下拉框里自动匹配关键字实时监听文本框value值变化的功能,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
您可能感兴趣的文章:
相关文章
这篇文章主要为大家详细介绍了Bootstrap框架,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
这篇文章主要介绍了JS函数进阶之prototy用法,结合实例形式分析了JavaScript函数中使用prototy扩展属性相关操作技巧,需要的朋友可以参考下2020-01-01
在Javascript中我们通常判断一个变量是否存在,即不为null或者undefined,这篇文章主要给大家介绍了关于JavaScript中判断变量是否存在的四种常用方法,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
这篇文章主要为大家详细介绍了微信小程序实现刷脸登录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要介绍了JavaScript基于对象去除数组重复项的方法,结合实例形式分析了javascript数组去重的操作步骤与具体实现技巧,需要的朋友可以参考下2016-10-10
这篇文章主要为大家详细介绍了原生js仿jquery animate动画效果，具有一定的，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了javascript按钮禁用和启用的效果实例代码,需要的朋友可以参考下2017-10-10
这篇文章主要为大家详细介绍了JS实现网页端猜数字小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要介绍了Javascript中实现trim()函数的两种方法,本文直接给出实现代码和使用方法,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了JS+WCF实现进度条实时监测数据加载量的方法,结合实例形式分析了大量数据导入过程中前台js与后台WCF交互实现实时显示加载进度的相关操作技巧,需要的朋友可以参考下2017-12-12
最新评论