文档章节

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

Airship
 Airship
发布于 2016/12/09 08:58
字数 482
阅读 120
收藏 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
粉丝 46
博文 1065
码字总数 21602
作品 0
南京
高级程序员
私信 提问
input textarea监听鼠标粘贴

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

subying
2014/01/10
2.2K
0
js input一个值改变时自动修改另一个input的值

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

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

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

aiasfina
2013/07/08
25.1K
5
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

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

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

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

张孝国
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CSS中实现图片垂直居中

在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。” 当然出题并不是随意,而是有其现实的原因,垂直居中...

前端老手
46分钟前
4
0
vue学习笔记5:vue富文本编辑器ueditor的组件封装及问题

做一个后台,离不开文本编辑器,百度的ueditor经常用,这次改用vue写后台,需要再次集成一下,遇到很多问题,搞了一下午,整理一下,希望能够帮到后来者。 目标: 希望封装的ueditor组件,尽...

Jack088
57分钟前
5
0
MFC多线程编程之四——线程的同步

八、线程的同步 虽然多线程能给我们带来好处,但是也有不少问题需要解决。例如,对于像磁盘驱动器这样独占性系统资源,由于线程可以执行进程的任何代码段,且线程的运行是由系统调度自动完成...

rainbowcode
今天
3
0
QWIDGET、QMAINWINDOW、QFRAME、QWINDOW、QDIALOG、QSCROLLAREA区别

QWindow一般不用 QDialog对话框而已 QScrollArea有滚动条的窗口。 from PyQt5.QtWidgets import (QWidget,QListWidget,QLabel,QApplication,QScrollArea,QFrame,QAction,QVBoxLayout,QLis......

shzwork
今天
3
0
CRM、DMP、CDP都是什么?有什么区别?

Markter对CRM系统(Customer Relationship Management System,客户关系管理系统),营销自动化等概念都已经比较熟悉,也许DMP(Data Management Platform,数据管理平台)也多多少少有些了解。...

怡海软件-CRM
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部