onpropertychange_检测input框值变化_wdatepicker onchange

项目中常遇到输入框检查的需求，比如即时搜索，用change事件？change事件失去焦点才发生，无法做到即时。keypresss事件？能到键盘，但不到鼠标复制粘贴，不完美。

还好有propertychange（IE）和oninput事件。

oninput是标准浏览器的事件，一般应用于input元素，当input的value发生变化时就会发生，无论是键盘输入还是鼠标粘贴的改变都能即时到。onpropertychange

浏览器兼容

例子

在textarea中，如果想捕获用户的键盘输入，用onkeyup检查事件就可以了，但是onkeyup并不支持复制和粘贴，因此需要动态监测textarea中值的变化，这就需要onpropertychange（用在IE浏览器）和oninput（非IE浏览器）结合在一起使用了。

如果想要用JavaScript设置textarea的属性，需如下：

if(isIE)

{

document.getElementById("wb_comment_content").onpropertychange = set_alert_wb_comment();

}

else //需要用addEventListener来注册事件

{

document.getElementById("wb_comment_content").addEventListener("input", set_alert_wb_comment, false);

}

其余函数

function click_wb_textarea(obj)

{

if(obj.value==obj.defaultValue)

{

obj.value="";

}

//obj.className=""; //这样设置类名在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug

obj.style.color="#000";

return false;

}

function blur_wb_textarea(obj)

{

if(obj.value=="")

{

//obj.className="gary666";

obj.style.color="#666";

obj.value= obj.defaultValue;

}

return false;

}

4、onpropertychange的bug

在代码实现时，发现在响应用户onclick了textarea时，如果使用obj.className="XX";来改变textarea输入框中字体的样式，会导致在ie下会有在输入第一个字符的时候onpropertychange不会触发的bug，因此需要这样设置：obj.style.color="#000";

IE9以下是不支持的。这个时候就要用到IE专有的propertychange事件。顾名思义，翻译过来叫属性变更事件，这个事件就比较强大了，不仅仅会到input的value属性，还包括其他标签的属性各种属性发生变化都会发生该事件，比如span元素的style属性。onpropertychange在事件发生时还可以用event.propertyName访问到改变的属性名。

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-33715-1.html