JavaScript监听输入框值即时变化：onpropertychange与oninput兼容方案

监听输入框值即时变化的需求

在许多应用场景中，我们需要实时监听输入框内容的变化，以便即时执行相应操作，从而提升网站的用户体验。例如，实时显示已输入的字节数，或根据输入内容即时进行搜索联想，实现类似Google的关联搜索效果。

只要能够捕获这些实时事件，即可实现丰富的交互功能。

onchange与onpropertychange的区别

首先，我们需要明确onchange与onproperty两个事件的区别：

在IE浏览器中，当HTML元素的属性发生改变时，可以通过onpropertychange事件即时捕获到这一变化。

而onchange事件在属性值发生变化时，必须等待当前元素失去焦点（触发onblur）后才会激活。

基于上述差异，onpropertychange的效果正是我们所需要的，但遗憾的是，它仅在IE浏览器中有效。那么，是否存在其他事件可以替代onpropertychange呢？

查阅相关资料可知，在其他主流浏览器中，可以使用oninput事件来实现相同的功能。这非常理想，我们只需将IE浏览器单独区分处理即可。

oninput事件的使用与注册

如果直接将事件处理代码写在HTML页面中，可以采用如下写法：

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

然而，当通过JavaScript代码分离注册oninput事件时，其注册方式与普通事件有所不同，必须使用addEventListener方法进行注册。

attachEvent与addEventListener的差异

在此，我们进一步了解一下attachEvent和addEventListener两种方法的具体用法：

attachEvent方法用于为特定事件附加其他处理程序（不支持Mozilla系列浏览器）。

addEventListener方法则用于Mozilla系列浏览器。

具体示例如下：

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

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

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

若按上述方式直接赋值，最终只有method3会被执行。

var btn1Obj = document.getElementById("btn1");

btn1Obj.attachEvent("onclick",method1);

btn1Obj.attachEvent("onclick",method2);

btn1Obj.attachEvent("onclick",method3);

此时，事件的执行顺序为method3 -> method2 -> method1。

对于Mozilla系列浏览器，由于不支持attachEvent方法，需使用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");
} 

至此，我们遇到的问题已得到解决，接下来编写代码测试我们的思路是否可行。

完整代码：

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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" oninput="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。