本文介绍如何在JavaScript中实时监听文本框输入状态,通过判断浏览器类型实现兼容。IE浏览器使用onpropertychange事件,而标准浏览器如Chrome则采用addEventListener监听input事件,确保在不同环境下均能即时获取用户输入值。
JavaScript实时监听文本框输入状态:兼容IE与标准浏览器的实现方案
具体实现代码如下所示:
<div id="msg"></div>
<input type="text" name="txt" id="txt"/>
<script>
// 定义状态改变时触发的处理函数
function handle()
{
document.getElementById('msg').innerHTML = document.getElementById('txt').value;
}
// 注意:if("\v"=="v")仅在IE浏览器中返回true,包括IE8版本
// 或者使用 if(/msie/i.test(navigator.userAgent)) 也能有效判断浏览器类型
if("\v"=="v"){
// 针对IE浏览器,监听文本框的propertychange事件并绑定处理函数,注意函数名后不能加括号
document.getElementById('txt').onpropertychange = handle;
}else{
// 针对非IE浏览器(如Chrome),通过addEventListener为文本框添加input事件监听,同样函数名后不可加括号
document.getElementById('txt').addEventListener("input", handle);
}
</script>