在文本框输入数据的时候,当键盘按下并放开的时候可以使用onkeyup来检测事件,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获。可是有的时候我们输入数据是采用粘贴的方式而不是键盘输入,这就需要实时检测文本框状态的改变。
onpropertychange 不被firefox所支持,如果想在firefox下正常使用,需要用oninput属性,且需要用addeventlistener来注册事件。
//当状态改变的时候执行的函数
function handle()
{document.getelementbyid('msg').innerhtml='输入的文字长度为:'+document.getelementbyid('txt').value.length;
}
//firefox下检测状态改变只能用oninput,且需要用addeventlistener来注册事件。
if(/msie/i.test(navigator.useragent)) //ie浏览器
{document.getelementbyid('txt').onpropertychange=handle
}
else
{//非ie浏览器,比如firefox
document.getelementbyid('txt').addeventlistener("input",handle,false);
}
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
例子:
复制代码 代码如下:
<html>
<body>
<div>oninput测试</div>
<div id="testdiv"><input id='tx1' name="tx1" value="" /></div>
</body>
</html>
<script language="javascript">
<!--
function getos(){//判断浏览器类型
var osobject = "";
if(navigator.useragent.indexof("msie")>0) {
return "msie";
}
if(isfirefox=navigator.useragent.indexof("firefox")>0){
return "firefox";
}
if(issafari=navigator.useragent.indexof("safari")>0) {
return "safari";
}
if(iscamino=navigator.useragent.indexof("camino")>0){
return "camino";
}
if(ismozilla=navigator.useragent.indexof("gecko/")>0){
return "gecko";
}
}
if(navigator.useragent.indexof("msie")>0){
document.getelementbyid('tx1').attachevent("onpropertychange",txchange);
}else if(navigator.useragent.indexof("firefox")>0){
document.getelementbyid('tx1').addeventlistener("input",txchange2,false);
}
function txchange(){
alert("testie");
}
function txchange2(){
alert("testfirefox");
}
</script>
以上就是兼容firefox的onpropertychange事件方法。