转载：text中onchange事件迟缓

最新推荐文章于 2021-04-28 08:44:25 发布

huang348102023

最新推荐文章于 2021-04-28 08:44:25 发布

阅读量384

点赞数

分类专栏：前端开发文章标签： IE CSS JavaScript XHTML HTML ViewUI

本文链接：https://blog.csdn.net/huang348102023/article/details/83925842

版权

前端开发专栏收录该内容

7 篇文章 0 订阅

订阅专栏

最近工作中遇到这样的问题，在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

huang348102023

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
转载：text中onchange事件迟缓

最近工作中遇到这样的问题，在text框中输入内容直接提交表单，并不触发onchange()事件。网上搜了一下原来text的onchange事件只有在text失去焦点的时候才被触发。解决方法：1.onpropertychange事件只适用于IE，可以实现真正意义上的“change”事件。2.主动触发change事件 object.fireEvent('onchange')。...
复制链接

扫一扫