文档章节

js与jquery实时监听输入框值的oninput与onpropertychange方法

Airship
 Airship
发布于 2016/12/09 08:58
字数 482
阅读 88
收藏 0

本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下:

最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容。

初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发。曲线救国一下,想到用 keydown 来解决。其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发的。所以这个方法也排除掉了。

然后,查询了一些相关资料,发现只有原生 js 的 oninput & onpropertychange 符合此要求,接着便去 JQ 的 API 里去找符合的方法,很失望,并未找到,但是 bind 确实会绑定类似的事件,那便是 input & propertychange,通过测试,确实是没问题的。

现在将例子奉上:

$('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程序设计有所帮助。

本文转载自:http://www.jb51.net/article/60789.htm

共有 人打赏支持
Airship
粉丝 38
博文 875
码字总数 18996
作品 0
南京
高级程序员
input textarea监听鼠标粘贴

发现一个问题,在input/textarea中如果是鼠标粘贴内容进去,发现判断不了value的改变,html代码如下: <!doctype html><html><head><meta charset="utf-8"><title>判断粘贴</title><script t......

subying
2014/01/10
0
0
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
09/08
0
0
67 个节省开发者时间的实用工具、库与资源(前端向)

在这篇文章中,我不会与大家谈论大型的前端框架,如 React、Angular、Vue 等,也没有涉及那些流行的代码编辑器,如 Atom、VS Code、Sublime,我只想与大家分享一个有助于提升开发人员效率的工...

张孝国
06/26
0
0
jQuery控制IFRAME父窗口元素

DOM方法: 父窗口操作IFRAME:window.frames["iframeSon"].document IFRAME操作父窗口: window.parent.document jquery方法: 在父窗口中操作 选中IFRAME中的所有输入框: $(window.frames["i...

疯狂的艺术家
2011/04/01
0
1
input文本框获取焦点和失去焦点判断

onBlur:当输入框失去焦点后 onFocus:当输入框获得焦点后 这两个JavaScript事件是写在html标签中的例如: 使用jQuery的实现方法为: 对于元素的焦点事件,我们可以使用jQuery的焦点函数focus...

你好_世界_
07/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于Excel表格导出方法--application/vnd.ms-excel

关于Excel表格导出方法--application/vnd.ms-excel 由于本人所做的项目中需要用到两种将JSP页面table导出到Excel表格的方法(老板也是坑爹),一种是在后台操作数据库来实现,比较简单。由于...

DemonsI
23分钟前
1
0
springboot配置读写分离

我不提供内容,我只是好文章的搬运工 https://www.cnblogs.com/wuyoucao/p/9610882.html

颖辉小居
27分钟前
1
0
Spring 传参

spring传参之@RequestParam注解 @RequestParam注解有三个参数分别是: value、 required、 defaultValue 代码: @RequestMapping(value="test1", method = RequestMethod.GET) public String......

休辞醉倒
29分钟前
1
0
go http 框架性能大幅下降原因分析

最近在开发一个web 框架,然后业务方使用过程中,跟我们说,压测qps 上不去,我就很纳闷,httprouter + net/http.httpserver , 性能不可能这么差啊,网上的压测结果都是10w qps 以上,几个m...

鼎铭
29分钟前
7
0
GCC编译过程记

GCC编译过程记 一、引言 对于编程工作者来说,GCC是一个熟悉的名字,它的全称是“GNU Compiler Collection”。GCC是一组编译器集合,目前其支持C、C++、Objective-C、Objective-C++、Go和RBI...

珲少
31分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部