asp.net监听输入框值的即时变化onpropertychange、oninput

要达到的效果

很多情况下我们都会即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数，或者即时读取输入的值来进行搜索引导，也就是google的关联搜索效果等。只要我们能捕获即时事件就能做到很多事情。

需要了解的知识
首先，我们需要了解onchange和onpropertychange的不同：
IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。
onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。

了解这一点后我们发现onpropertychange的效果就是我们想要的，可是很遗憾，它只在IE下有效果。我们能不能找到另外一个事件来代替onpropertychange呢？

经过翻阅资料得知，在其他浏览器下可以使用oninput事件来达到同样的效果，真是太好了，我们只需要把IE浏览器区分出来就可以。

oninput的使用

下面我们先了解一下oninput如何使用。

如果您是将注册事件直接写在页面里面，那么如下写法就可以实现：

<input type="text" name="textfield" οninput="alert(this.value);" onpropertychange="alert(this.value)" />

但是，将oninput写在JS代码中分离出来时与普通事件注册的方法有些不同，必须使用addEventListener来注册。

attachEvent和addEventListener 的不同

说到这里我们再来了解一下 attachEvent和addEventListener 的使用方法：

attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）
addEventListener方法，用于 Mozilla系列。

举例

代码:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

如果这样写,那么将会只有medhot3被执行

写成这样

代码:

var btn1Obj = document.getElementById("btn1");
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);

执行顺序为method3—>method2—>method1

如果是Mozilla系列，并不支持该方法，需要用到addEventListener

代码:

var btn1Obj = document.getElementById("btn1");
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

了解了如何使用addEventListener来注册oninput事件后我们再回到要解决的问题【划分浏览器】。

判断IE浏览器

如何将IE区分出来呢？

这似乎是一个老生常谈的问题，网络中有很多找那个方法，归类为两类：
其一，是判断浏览器的功能属性。
其二，就是判断传统的 user-agent 字符串，这可能是最古老也是最流行的检测方式。
在这里就不做深入了解了，我们这里用一种比较简单的方法来判断

代码:

if("\v"=="v") {alert("IE");
}else{alert("NO");
}

到目前为止我们遇到的问题就已经解决了，开始写代码来测试我们的思路是否能够实现。

完成代码：

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transtional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="auther" content="fq" />
<title>监听输入框值的即时变化 onpropertychange  oninput</title><script type="text/javascript">
function immediately(){var element = document.getElementById("mytext");if("\v"=="v") {element.onpropertychange = webChange;}else{element.addEventListener("input",webChange,false);}function webChange(){if(element.value){document.getElementById("test").innerHTML = element.value};}
}
</script></head>
<body>直接写在页面中的示例：
<input type="text" name="textfield" οninput="document.getElementById('webtest').innerHTML=this.value;" onpropertychange="document.getElementById('webtest').innerHTML=this.value;" /><div>您输入的值为：<span id="webtest">还未输入</span></div><br /><br /><br /><br /><br />写在JS中的示例：
<input type="text" name="textfield" id="mytext" /><div>您输入的值为：<span id="test">还未输入</span></div><script type="text/javascript">
immediately();
</script></body>
</html>

提示：可以先修改部分代码再运行

预览以上代码，页面中共实现两种方式：
第一、页面中直接引用；
第二、JS中引用。

经过测试，兼容：IE6、IE7、IE8、Firefox、Opera、Chrome、Safari

asp.net监听输入框值的即时变化onpropertychange、oninput相关推荐

6- js监听输入框值的即时变化onpropertychange、oninput
js监听输入框值的即时变化onpropertychange.oninput 标题: js监听输入框值的即时变化onpropertychange.oninput事件参考: http://m.jb51. ...
jquery实时监听输入框值变化
在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条 ...
实时监听输入框值变化的完美方案：oninput onpropertychange
实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...
angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法
用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页 ...
angular监听输入框值的变化_如何检测Angular中@Input（）值何时发生变化？
Actually, there are two ways of detecting and acting up on when an input changes in the child compon ...
angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
javascript监听输入框_html通过JS/jQuery实现实时监听输入框input的内容
最近在做一个功能:联想搜索功能.具体实现做法如下:通过实时监听输入框input的内容,来实时发起网络请求,向后台获取联想到的搜索内容并展示到前台.那么该如何实现input的实时监听呢做法一(jQue ...
巧用即刻搜索事件 input propertychange 监听输入框字数
实时监听输入框的字数,大于200时,不再输入. 即时搜索: propertychange(ie)和input事件(常用) input是标准的浏览器事件,一般应用于input元素,当input的valu ...
原生js监听input值发生变化
原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...

asp.net监听输入框值的即时变化onpropertychange、oninput

asp.net监听输入框值的即时变化onpropertychange、oninput相关推荐

最新文章

热门文章