js监听文本框变化事件
用js有两种写法：
法一：
<!DOCTYPE HTMl>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="msg"></div>
<input id='txt' value="" />
<input id='btn' value="点我" type="button" onclick="ff()" />
<script>
//当状态改变的时候执行的函数
function handle() {
document.getElementById('msg').innerHTML = "输入的文字为：" + document.getElementById('txt').value;
}
if(/msie/i.test(navigator.userAgent)) { //ie浏览器
console.log("ie浏览器")
//document.getElementById('txt').onpropertychange = handle;
document.getElementById('txt').attachEvent("onpropertychange", handle);
}
else {//非ie浏览器，比如Firefox
console.log("非ie浏览器")
document.getElementById('txt').addEventListener("input", handle, false);
//document.getElementById('txt').watch('a', fn);
}
function ff() {
document.getElementById('txt').value=Math.random();
}
</script>
</body>
</html>
法一的缺点显而易见，需要判断浏览器的版本，貌似ie11之后是支持
addEventListener，但是，ie11却不能通过
/msie/i.test(navigator.userAgent)去判断，原因是因为userAgent中不包括msie字符串了。
附个版本浏览器的userAgent：
ie11:Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; rv:11.0) like Gecko
ie10:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
ie9:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
ie8:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)
ie7:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)
ie6:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
chrome:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.146 Safari/537.36
firefox:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0
法二：
法二是对法一思想上的升级，不需要通过检测浏览器，而是检测Web 浏览器所支持功能的方法存在，即直接检测对功能的支持：
<!DOCTYPE HTMl>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="msg"></div>
<input id='txt' value="" />
<input id='btn' value="点我" type="button" onclick="ff()" />
<script>
//当状态改变的时候执行的函数 function handle() {
document.getElementById('msg').innerHTML = "输入的文字为：" + document.getElementById('txt').value;
} function registerEvent(sTargetID, sEventName, fnHandler) {
var oTarget = document.getElementById(sTargetID);
if (oTarget != null) {
if (oTarget.addEventListener) {
oTarget.addEventListener(sEventName, fnHandler, false);
} else {
var sOnEvent = "on" + sEventName;
if (oTarget.attachEvent) {
oTarget.attachEvent(sOnEvent, fnHandler);
}
}
}
}
registerEvent('txt',"input",handle);
</script>
</body>
</html>
法二可以用在很多浏览器兼容的事件添加上，但是有个问题，比如input是html5新增加的事件，对于一些不支持html5的老ie版本，可能会有问题
法三：
使用jquery实现
使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码如下：
$('textarea').bind('input propertychange', function() {
$('.msg').html($(this).val().length + ' characters');
});
js监听文本框变化事件的更多相关文章
- js监听文本框内容变化
js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...
- js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别
在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...
- 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...
- 监听文本框输入oninput和onpropertychange事件
前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...
- 监听文本框输入开发仿新浪微博限制输入字数的textarea插件
监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...
- IOS NSNotificationCenter（通知 的使用）监听文本框的文字改变
监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...
- 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题
前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...
- JS监听input框的回车事件、属性值改变事件
一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...
- 2016-1-6第一个完整APP 私人通讯录的实现 2：增加提示用户的提示框，监听文本框
一:在登录时弹出提示用户的提示框: 1.使用第三方框架. 2.在登陆按钮点击事件中增加如下代码: - (IBAction)loginBtnClicked { NSString *acount = se ...
随机推荐
- 【Python】《大话设计模式》Python版代码实现
<大话设计模式>Python版代码实现 上一周把<大话设计模式>看完了,对面向对象技术有了新的理解,对于一个在C下写代码比较多.偶尔会用到一些脚本语言写脚本的人来说,很是开阔眼 ...
- 关于DrawIndexedPrimitive函数的调用
函数的原型例如以下所看到的: HRESULT DrawIndexedPrimitive( [in] D3DPRIMITIVETYPE Type, [in] INT BaseVertexIndex, [ ...
- JQuery EasyUI 动态改变表单项的验证守则
//JQuery EasyUI 动态改变表单项的验证规则 $(document).ready(function(){ $('#FILE_QUALITY').combobox({ onChange:fu ...
- 【Python】http.client库的用法
代码: # http.client测试,该库较底层,不常用 import http.client conn=None try: conn=http.client.HTTPSConnection(&qu ...
- linux系统中的DNS服务器介绍
http://lq2419.blog.51cto.com/1365130/1172269 DNS:Domain Name Service,linux上的DNS服务是基于一种软件BIND实现的.BIND ...
- 如何知道TSQL语句已经运行了多久
如何知道TSQL语句已经运行了多久 ,) --millisecond per tick --如果datediff 函数导致溢出 把下面的millisecond改为second 毫秒改为秒 SELECT ...
- 43、Java动态代理一——动态类Proxy的使用
1.什么是动态代理? 答:动态代理可以提供对另一个对象的访问,同时隐藏实际对象的具体事实.代理一般会实现它所表示的实际对象的接口.代理可以访问实际对象,但是延迟实现实际对象的部分功能,实际对象实现系统 ...
- java获取unicode码
public String toUNICODE(String s) { StringBuilder sb=new StringBuilder(); for(in ...
- Java反射机制及Method.invoke详解
JAVA反射机制 JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法:这种动态获取的信息以及动态调用对象的方法的功能称为ja ...
- DBMS_SQL使用
一.简介 DBMS_SQL包提供一个接口,用于执行动态SQL(包括DDL 和DML). DBMS_SQL定义了一个实体叫游标ID,游标ID是一个PL/SQL整型数,通过游标ID,可以对游标进行操作. ...