:text中onchange事件迟缓

最近工作中遇到这样的问题,在text框中输入内容直接提交表单,并不触发onchange()事件。网上搜了一下原来text的onchange事件只有在text失去焦点的时候才被触发。

解决方法:

1.onpropertychange事件    只适用于IE,可以实现真正意义上的“change”事件。

2.主动触发change事件   object.fireEvent('onchange')。

对于非IE浏览器,可以用oninput,但是oninput必须用addEventListener的方式来绑定事件否则无效。

以下代码为转载:

<!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=utf-8" /> 
<title>on用onpropertychange,oninput事件解决onchange事件的不足 by koyoz.com</title> 
<mce:style type="text/css"><!--
 
*{font-size:14px;font-family:'Comic Sans MS', Verdana} 
body {margin-left:20px} 
--></mce:style><style type="text/css" mce_bogus="1"> 
*{font-size:14px;font-family:'Comic Sans MS', Verdana} 
body {margin-left:20px} </style> 
</head> 

<body> 
<p>使用onchange事件: </p> 
<input type="text" id="txt1" /> 
<p>使用onpropertychange/oninput事件: </p> 
<input type="text" id="txt2" /> 
<p>结果:</p> 
<input type="text" id="txt" /> 


<mce:script type="text/javascript"><!--
 
var $ = function(o) { 
return document.getElementById(o) 
}; 

$('txt1').onchange = function() { 
$('txt').value = this.value; 
} 

$('txt2').onpropertychange = function() { 
$('txt').value = this.value; 
} 

if (window.addEventListener) { 
$('txt2').addEventListener('input', function() {$('txt').value = this.value}, false); 
} 
// --></mce:script> 
</body> 
</html>

 

转载地址:http://blog.csdn.net/lajianguo/archive/2009/09/02/4513405.aspx

 

 

 

你可能感兴趣的:(JavaScript,html,css,XHTML,IE)