js实时监听input输入框值的变化以便即使匹配搜索项

问题说明

在含有搜索框的网页中，经常需要及时匹配搜索项，因此需要监听input输入框的变化事件。如果使用 onkeydown、onkeypress、onkeyup 这个几个键盘事件来监测的话，除了监听不了右键的复制、剪贴和粘贴这些操作以外，在输入中文的拼音时同样触发，增加请求数不说还浪费流量。

解决方案

本文结合标准的oninput 和 IE 专属事件 onpropertychange 事件来监听输入框值变化。oninput 是 HTML5 的标准事件，对于检测 textarea, input:text, input:password 和 input:search 这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发，不像 onchange 事件需要失去焦点才触发。

代码实现

$().ready(function(){//页面加载完毕绑定输入框的oninput事件var bind_name='input';if(navigator.userAgent.indexOf("MSIE")!=-1) {bind_name='propertychange';}$('input').on(bind_name, function() {do something...});
});

参考链接：http://www.runoob.com/jsref/event-oninput.html

转载于:https://my.oschina.net/mayxu/blog/685425

js实时监听input输入框值的变化以便即使匹配搜索项相关推荐

实时监听 input输入框值的变化并响应动作
html <input type="text" id="id"> jquery $("#id").bind('input pro ...
js 实时监听input中值变化
摘自:http://blog.csdn.net/spy19881201/article/details/25537225 示例: <!DOCTYPE html> <html> ...
实时监听input输入框value的变化：
HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...
html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
JavaScript 实时监听input 中值变化
JavaScript 实时监听input 中值变化在 <input> 标签中,添加属性 oninput ,oninput 事件在元素获得用户输入时发生. 当 <input> ...
angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法
用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页 ...
JS实时监听DOM元素变化 - MutationObserver
使用 MutationObserver API实时监听DOM元素变化创建 MutationObserver 实列,接受一个用于监听到DOM元素变化的回调函数 const handleListenCh ...
java监听焦点事件_监听input输入框的失去焦点事件与按钮点击事件执行的顺序问题...
1.问题描述当在监听input失去焦点的事件的时候,在input输入框输入一段文字之后,点击发送按钮会发现,只触发了失去焦点事件,按钮点击事件并没有被触发,当再次点击按钮的时候,事件才会被触发 2. ...
JQUERY实时监听INPUT输入值
JQUERY方法: 方法原型: $(selector).bind(event,data,function,map) selector的语法参照jquery选择器语法参数描述 event 必需.规定 ...

js实时监听input输入框值的变化以便即使匹配搜索项

问题说明

解决方案

代码实现

js实时监听input输入框值的变化以便即使匹配搜索项相关推荐

最新文章

热门文章