input实时监听(input oninput propertychange onpropertychange)
本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法。分享给大家供大家参考。具体如下:
最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时监听文本框 value 值的变化,然后匹配相关内容。
初接项目,首先想到的是 JQ 里的 change,但是马上排除此方法,因为 change 是在文本框失去焦点时才会触发。曲线救国一下,想到用 keydown 来解决。其他一切还好,只是当不通过键盘操作,而是通过鼠标来复制粘贴时,这个事件是无法触发的。所以这个方法也排除掉了。
然后,查询了一些相关资料,发现只有原生 js 的 oninput & onpropertychange 符合此要求,接着便去 JQ 的 API 里去找符合的方法,很失望,并未找到,但是 bind 确实会绑定类似的事件,那便是 input & propertychange,通过测试,确实是没问题的。
现在将例子奉上:
JQ:
1
2
3
|
$( 'input' ).bind( 'input propertychange' , function () { //进行相关操作 }); |
其中:propertychange 是为了兼容 IE9 以下版本的。
JS中的 oninput 事件在 IE9 以下版本不支持,需要使用 IE 特有的 onpropertychange 事件替代,这个事件在用户界面改变或者使用脚本直接修改内容两种情况下都会触发,有以下几种情况:
修改了 input:checkbox 或者 input:radio 元素的选择中状态, checked 属性发生变化。
修改了 input:text 或者 textarea 元素的值,value 属性发生变化。
修改了 select 元素的选中项,selectedIndex 属性发生变化。
JS:
1
2
3
4
5
6
7
8
|
if (isIE) { document.getElementById( "input" ).onpropertychange = keys(); } else //需要用addEventListener来注册事件 { document.getElementById( "input" ).addEventListener( "input" , keys, false ); } |
input实时监听(input oninput propertychange onpropertychange)的更多相关文章
- 实时监听input输入内容的N种方法
现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...
- js 实时监听input中值变化
注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...
- 使用jQuery实时监听input输入值的变化
//jQuery实时监听input值变化 $("#email").on("input propertychange",function(){ var str = ...
- jq 实时监听input输入框的变化
项目需求中有时候需要实时监测 input 的值变化,虽然 input 自身有 focus 和 blur 事件,但是有时候跟需求不符合. 所以实时监听 input 值变化的代码为: $("#i ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
- 实时监听input输入框value的变化:
HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...
- 关于实时监听input的值得变化的问题
onchange 关于input的onchange事件 其实是有出发条件的 并非实时监听的 1.鼠标点击事件 或者键盘事件(tab和wins键都可以触发 enter在ie9时不触发,火狐和ch ...
- 实时监听input输入的变化(兼容主流浏览器)【转】
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
- [转] 实时监听input输入的变化(兼容主流浏览器)
遇到如此需求,首先想到的是change事件,但用过change的都知道只有在input失去焦点时才会触发,并不能满足实时监测的需求,比如监测用户输入字符数. 在经过查阅一番资料后,欣慰的发现firef ...
随机推荐
- [Java] 过滤文件夹
package test.file; import java.io.File; import java.io.FileFilter; /** * 过滤文件夹 * @author Frost.Yen * ...
- 编写一个go gRPC的服务
前置条件: 获取 gRPC-go 源码 $ go get google.golang.org/grpc 简单例子的源码位置: $ cd $GOPATH/src/google.golang.org/gr ...
- [SQJ]sql如何实现类似统计的功能
假设mssql2000中, 有如下表: table Class class_No course_Name ----------------------------------- chinese mat ...
- cocos2d-x 利用CCLabelTTF制作文字描边与阴影效果的实现方法
// // myttf.h// // Created by 王天宇 on 14-6-12. // // #ifndef ____SLG__myttf__ #define ____SLG__myttf_ ...
- Python子类方法的调用(类方法)
class S(object): def Test(self): print("TEST") @classmethod def Test02(cls): print("c ...
- SQLSERVER的兼容级别
今天采用SQL Mannager 2008连接远程的sqlserver数据库,之后弹出一个对话框,修改SQL兼容级别,当时每太注意,一下点击了确定按钮,结果导致两个系统SQL只想全部出错,幸亏发现的早 ...
- 关联规则挖掘之apriori算法
前言: 众所周知,关联规则挖掘是数据挖掘中重要的一部分,如著名的啤酒和尿布的问题.今天要学习的是经典的关联规则挖掘算法--Apriori算法 一.算法的基本原理 由k项频繁集去导出k+1项频繁集. 二 ...
- Cocos2dx老版本适配64位
1.出现"__curl_rule_01__ "错误 解决方法: 下载新的第三方libcurl库.替换掉libcurl相关的库和头文件,libcul.a .h文件. 相关路径:co ...
- Oozie 中各种类型的作业执行结果记录
一,提交的作业被SUSPEND,然后再被KILL,记录如下: TYPE1: appType WORKFLOW_JOB id 0000002-160516095026479-oozie-oozi-W e ...
- c++引用小问题!
两段程序 string version(const string &s1,const string &s2) { string temp; temp =s2+s1+s2; return ...