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

缺乏、安全感 2022-06-10 05:55 232阅读 0赞

要达到的效果  
  
    很多情况下我们都会即时监听输入框值的变化，以便作出即时动作去引导浏览者增强网站的用户体验感。比如即时显示输入框已经被输入的字节数，或者即时读取输入的值来进行搜索引导，也就是google的关联搜索效果等。  
  
  
    只要我们能捕获即时事件就能做到很多事情。  
  
需要了解的知识  
  
    首先，我们需要了解onchange和onpropertychange的不同：  
  
    IE下，当一个HTML元素的属性改变的时候，都能通过 onpropertychange来即时捕获。  
onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。  
  
    了解这一点后我们发现onpropertychange的效果就是我们想要的，可是很遗憾，它只在IE下有效果。我们能不能找到另外一个时间来代替onpropertychange呢？  
  
    经过翻阅资料得知，在其他浏览器下可以使用oninput事件来达到同样的效果，真是太好了，我们只需要把IE浏览器区分出来就可以。  
  
     oninput的使用  
  
    下面我们先了解一下oninput如何使用。  
    如果您是将注册时间直接写在页面里面，那么如下写法就可以实现：

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

复制代码

但是，将oninput写在JS代码中分离出来时与普通事件注册的方法有些不同，必须使用addEventListener来注册。  
  
     attachEvent和addEventListener 的不同  
  
    说到这里我们再来了解一下 attachEvent和addEventListener 的使用方法：  
  
attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）  
addEventListener方法 用于 Mozilla系列  
  
举例:

1.  document.getElementById("btn").onclick = method1;  
    
2.  document.getElementById("btn").onclick = method2;  
    
3.  document.getElementById("btn").onclick = method3;  
    
4.

复制代码

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

1.    
    
2.  var btn1Obj = document.getElementById("btn1");  
    
3.  btn1Obj.attachEvent("onclick",method1);  
    
4.  btn1Obj.attachEvent("onclick",method2);  
    
5.  btn1Obj.attachEvent("onclick",method3);

复制代码

执行顺序为method3->method2->method1  
  
  
如果是Mozilla系列，并不支持该方法，需要用到addEventListener

1.    
    
2.  var btn1Obj = document.getElementById("btn1");  
    
3.  btn1Obj.addEventListener("click",method1,false);  
    
4.  btn1Obj.addEventListener("click",method2,false);  
    
5.  btn1Obj.addEventListener("click",method3,false);  
    
6.  执行顺序为method1->method2->method3

复制代码

了解了如何使用addEventListener来注册oninput事件后我们再回到要解决的问题\[划分浏览器\]。  
  
     判断IE浏览器  
  
    如何将IE区分出来呢？  
这似乎是一个老生常谈的问题，网络中有很多找那个方法，归类为两类：  
其一，是判断浏览器的功能属性。  
其二，就是判断传统的 user-agent 字符串，这可能是最古老也是最流行的检测方式。  
在这里就不做深入了解了，我们这里用一种比较简单的方法来判断

1.    
    
2.  if("\\v"=="v") \{  
    
3.    alert("IE");  
    
4.  \}else\{  
    
5.    alert("NO");  
    
6.  \}  
    
7.

复制代码

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

<!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" ο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