文档章节

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

Airship
 Airship
发布于 2016/12/09 08:58
字数 482
阅读 98
收藏 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
博文 908
码字总数 19854
作品 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 input一个值改变时自动修改另一个input的值

就是使用 js input 值改变时自动修改其它input的值。网上答案我都试过了。不行。 因为我的是:点击输入框,弹出城市选择控件直接点击城市名就Ok。什么点击事件不行。 监听输入框值的即时变化...

markYun
2013/03/22
9.3K
6
JavaScript 实现简单的双向数据绑定

双向数据绑定指的就是,绑定对象属性的改变到用户界面的变化的能力,反之亦然。换种说法,如果我们有一个user对象和一个name属性,一旦我们赋了一个新值给user.name,在UI上就会显示新的姓名了...

aiasfina
2013/07/08
24.2K
5
网站开发进阶(五十三)浅谈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

没有更多内容

加载失败,请刷新页面

加载更多

ConcurrentHashMap源码解析

初始化 先看看ConcurrentHashMap中几个重要的属性: // 初始化容量大小static final int DEFAULT_INITIAL_CAPACITY = 16;//默认负载因子static final float DEFAULT_LOAD_FACTOR = 0.75f...

grace_233
10分钟前
0
0
java对象的浅拷贝和深拷贝

浅拷贝 java的数据类型有基本数据类型(如:int、long等)和引用数据类型。例如:对象1中有属性a(基本数据类型)和属性b(引用数据类型),在进行浅拷贝到对象2时,属性a复制属性的值给对象...

yangyangyyyy
11分钟前
0
0
SQLServer AlwaysOn在阿里云的前世今生

缘起 早在2015年的时候,随着阿里云业务突飞猛进的发展,SQLServer业务也积累了大批忠实客户,其中一些体量较大的客户在类似大促的业务高峰时RDS的单机规格(规格是按照 内存CPUIOPS 一定比例...

阿里云云栖社区
12分钟前
0
0
ubuntu16.04 LNMP搭建 php7.1

sudo apt-get update sudo apt-get install mysql-server mysql-client sudo apt-add-repository ppa:ondrej/php sudo apt-get update sudo apt-get install php7.1 php7.1-fpm php7.1-cgi p......

一千零一夜个为什么
18分钟前
0
0
阿里云高级技术专家带你全面了解云主机性能评测

钱超,花名西邪,阿里云高级技术专家,超12年老阿里,是云主机性能领域的知名专家。 在目前的云计算测评领域,很多性能测评存在营销的包装,容易引起误导:比如用瞬时性能引导读者得出结论,...

阿里云官方博客
25分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部