onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后，产生该文件
Onchange:当文字值改变时，产生该事件
onpropertychange:当元素属性改变时，产生该事件 （限IE浏览器）
Onselect:当文字加亮后，产生该文件
1、可以这样说，onpropertychange要比onchange先触发事件，前者是有连带反映的。
举个例子，前者更适合做搜索提示，后者则不适合；后者更适合做计算器，而前者则不适合！
2、 用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>
3、onchange和onpropertychange详细区别
当一个HTML元素的属性用javascript改变的时候，都能通过 onpropertychange来捕获。例如一个 <input name="text1" id="text1" />对象的value属性被页面的脚本修改的时候，onchange无法捕获到，而onpropertychange却能够捕获。
也就是说：onpropertychange 事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发，用 js改变其值不能触发!onpropertychange和onchange都不管文本框中的实际值有没有变，只要有改的相应操作就可能触发。有时当上面 两时间都不能满足需求时，可以考虑只用onblur。
4、还有一点要注意到，当onblur和onchange事件一起用时，onblur会出问题。。。。
详见如下
测试页面：
<html>
<head><title>通过js改变文本框中的值后触发的事件：onpropertychange事件</title></head>
<body>
<div id="test1">
<b>测试onpropertychange事件和onchange事件一起用时：</b><br>
<font color="red">测试结果：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点后才触
发，用js改变其值不触发</font>
<br>
<input name="haha1" type="text" onpropertychange="alert('触发了onpropertychange事件！')" onchange="alert('触发了onchange事件！')" size="30" >
<input name="testbutton1" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha1').value='js改变文本框后的值'">
<br>
<br>
<br>
<div id="test2">
<b>测试只有onblur和onchange事件时：</b><br>
<font color="red">测试结果：onchange先触发，onblur后触发</font>
<br>
<input name="haha2" type="text" onblur="alert('触发了onblur事件！')" onchange="alert('触发了onchange事件！')" size="30" >
<input name="testbutton2" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha2').value='js改变文本框后的值'">
<br>
<div>
<br>
<br>
<br>
<div id="test3">
<b>测试当onblur和onpropertychange事件一起用时：</b><br>
<font color="red">测试结果：onblur好象出了问题，只要用键盘在文本框中随便输入一个值，便会触发它。可能是onpropertychange把它惹毛了。。。^-^</font>
<br>
<input name="haha3" type="text" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" size="30" >
<input name="testbutton3" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha3').value='js改变文本框后的值'">
<br>
<div>
<br>
<br>
<br>
<div id="test4">
<b>测试有onblur、onpropertychange事件和onchange事件一起用时：</b><br>
<font color="red">测试结果：onblur在和onpropertychange一起用时的问题仍然存在</font>
<br>
<input name="haha4" type="text" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" onchange="alert('触发了
onchange事件！')" size="30" >
<input name="testbutton4" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha4').value='js改变文本框后的值'">
<br>
<div>
</body>
</html>
脚本应用：
function textCounter(field,maxlimit)
{
if(field.value.length > maxlimit)
{
field.value = field.value.substring(0,maxlimit);
}
}
分享到：
相关推荐
JavaScript onblur与onfocus事件详解 html页面中，诸如按钮、文本框等可视元素都具有拥有和失去焦点的事件，这些事件在响应鼠标或键盘动作时都可激发预设的操作。本文以文本框获得和失去焦点为例简单讲解onfocus和...
本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用。 一. onfocus（获得焦点事件） 当一个文本框获得焦点时，它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中，这样的操作可以利用...
JS：onfocus和onblur 事件应用举例
JavaScript的onfocus与onblur用法文章资源下载，供练习使用
也就是说：onpropertychange事件在用键盘每改变一下文本框的值或用js改变其值便会触发一下，而onchange只有在用键盘改变其值，然后在失去焦点(onblur)后才触发，用js改变其值不能触发!onpropertychange和onchange都...
在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件. 这样一来问题就解决了. 那其他浏览器呢,onpropertychange可是IE的专利. 接下来就是oninput事件了. 但是oninput有个诡异,...
下面小编就为大家带来一篇老生常谈onBlur事件与onfocus事件(js)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
onblur事件，鼠标离开表单input框时触发的事件
Form事件，由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：常用的为onblur、onfocus、onselect、onsubmit。 c. keybord事件 d.Mouse事件，由鼠标或类似用户动作触发的...
我就废话不多说了，大家还是直接看代码吧~ <Select placeholder=客户名称 showSearch ...1.Select必须具备onSearch,onBlur,onChange这三个属性; <Select showSearch value={this.state.value} o
主要介绍了详解HTML onfocus获得焦点和onblur失去焦点事件的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
今天小编就为大家分享一篇layui动态绑定事件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
OnFocus与OnBlur的例子，大家可以运行下，看下区别。
文本框失去焦点事件、获得焦点事件 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后，产生该文件 Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件 onpropertychange 当属性...
Onchange:当文字值改变时，产生该事件 Onselect:当文字加亮后，产生该文件 <input type="text" value="mm" onfocus="if(value=='mm) {value=''}" onblur="if (value=='') {value='mm'}">点击时文字消失，失去焦点...
onload事件 ,onclick事件,onblur失去焦点事件,onsubmit表单提交事件的使用示例
很好用的富文本编辑器wangEditor,设置内容、获取内容、上传图片、使用 AMD 加载、使用 textarea、onblur、onfocus、onchange、获取 JSON、配置表情、多语言、CSS-Reset