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

最新推荐文章于 2020-03-19 19:17:58 发布

wlqt520

最新推荐文章于 2020-03-19 19:17:58 发布

阅读量133

点赞数

分类专栏： HTML JavaScript 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/wlqt520/article/details/84473212

版权

JavaScript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

HTML

14 篇文章 0 订阅

订阅专栏

http://www.koyoz.com/blog/?action=show&id=225

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

onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!

在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.

这样一来问题就解决了.

那其他浏览器呢,onpropertychange可是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> 
<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>