现在的位置: 首页 > 综合 > 正文

on用onpropertychange,oninput事件解决onchange事件的不足

2012年02月28日 ⁄ 综合 ⁄ 共 866字 ⁄ 字号 评论关闭

<!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>onpropertychange,oninput</title>
<style type="text/css">
*{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" />

<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);
}
</script>
</body>
</html>

抱歉!评论已关闭.