【DOM操作】实时监听input[type='text']和HTML标签中属性改变事件

来源：互联网发布：网络流行文化的研究编辑：程序博客网时间：2024/06/05 15:05

实时监听input[type='text']和HTML标签中属性改变事件

序号

Firefox

备注

支持 input、div

支持input type=text

对于 checkbox radio 来说可以通过focus事件定出发事件

//当状态改变的时候执行的函数

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);

支持 checkbox 、radio

onchange

支持 checkbox radio

以下是对input[type='text']和HTML标签中的属性监听

<!doctype html><html><head>  <meta charset="utf-8">  <title>实时监听input[type='text']和HTML标签中属性改变事件</title></head><body>  <input id="txt" type="text" value=""/>  <div id="msg"></div></body></html>

function handle() {    document.getElementById('msg').innerHTML = '输入的文字长度为：' + document.getElementById('txt').value.length;  }  if (/msie/i.test(navigator.userAgent)) {    //ie浏览器    document.getElementById('txt').onpropertychange = handle  } else {    //非ie浏览器，比如Firefox    //firefox下检测状态改变只能用oninput,且需要用addEventListener来注册事件。    document.getElementById('txt').addEventListener("input", handle, false);  }

以下是对input[type='radio']和input[type='checkbox']中的属性监听

<input type="radio" name="radio" value="2"  onchange="alert('FF');" onpropertychange="alert('IE');"/><input type="checkbox" name="radio" value="2"  onchange="alert('FF');" onpropertychange="alert('IE');"/><input type="radio" name="radio" value="2"  onchange="alert(this.checked);" onpropertychange="alert(this.checked);"/><input type="checkbox" name="radio" value="2"  onchange="alert(this.checked);" onpropertychange="alert(this.checked);"/>

0 0