js监听文本框变化事件

最新推荐文章于 2023-09-15 16:41:08 发布

weixin_30257433

最新推荐文章于 2023-09-15 16:41:08 发布

阅读量236

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/winkey4986/p/4754710.html

版权

用js有两种写法：

法一：

<!DOCTYPE HTMl>
<html> 
<head> 
<title> new document </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head> 
<body> 
<div id="msg"></div> 
<input id='txt' value="" /> 
<input id='btn' value="点我" type="button" onclick="ff()" /> 
<script> 
//当状态改变的时候执行的函数 
function handle() { 
    document.getElementById('msg').innerHTML = "输入的文字为：" + document.getElementById('txt').value; 
} 
if(/msie/i.test(navigator.userAgent)) {   //ie浏览器
    console.log("ie浏览器")
    //document.getElementById('txt').onpropertychange = handle; 
    document.getElementById('txt').attachEvent("onpropertychange", handle); 
} 
else {//非ie浏览器，比如Firefox 
    console.log("非ie浏览器")
    document.getElementById('txt').addEventListener("input", handle, false); 
    //document.getElementById('txt').watch('a', fn); 
} 
function ff() { 
    document.getElementById('txt').value=Math.random(); 
} 
</script> 
</body> 
</html>

法一的缺点显而易见，需要判断浏览器的版本，貌似ie11之后是支持

addEventListener，但是，ie11却不能通过

/msie/i.test(navigator.userAgent)去判断，原因是因为userAgent中不包括msie字符串了。
附个版本浏览器的userAgent：

ie11:Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; rv:11.0) like Gecko
ie10:Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)
ie9:Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)
ie8:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)
ie7:Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)
ie6:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

chrome:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.146 Safari/537.36
firefox:Mozilla/5.0 (Windows NT 6.1; WOW64; rv:37.0) Gecko/20100101 Firefox/37.0

法二：

法二是对法一思想上的升级，不需要通过检测浏览器，而是检测Web 浏览器所支持功能的方法存在，即直接检测对功能的支持：

<!DOCTYPE HTMl>
<html> 
<head> 
<title> new document </title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head> 
<body> 
<div id="msg"></div> 
<input id='txt' value="" /> 
<input id='btn' value="点我" type="button" onclick="ff()" /> 
<script> 
//当状态改变的时候执行的函数 

function handle() { 
    document.getElementById('msg').innerHTML = "输入的文字为：" + document.getElementById('txt').value; 
} 

function registerEvent(sTargetID, sEventName, fnHandler) {
    var oTarget = document.getElementById(sTargetID);
    if (oTarget != null) {
        if (oTarget.addEventListener) {
            oTarget.addEventListener(sEventName, fnHandler, false);
        } else {
            var sOnEvent = "on" + sEventName;
            if (oTarget.attachEvent) {
                oTarget.attachEvent(sOnEvent, fnHandler);
            }
        }
    }
}
registerEvent('txt',"input",handle);
</script> 
</body> 
</html>

法二可以用在很多浏览器兼容的事件添加上，但是有个问题，比如input是html5新增加的事件，对于一些不支持html5的老ie版本，可能会有问题

法三：

使用jquery实现

使用 jQuery 库的话，只需要同时绑定 oninput 和 onpropertychange 两个事件就可以了，示例代码如下：

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});

转载于:https://www.cnblogs.com/winkey4986/p/4754710.html

weixin_30257433

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js监听文本框变化事件

用js有两种写法：法一：<!DOCTYPE HTMl><html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></hea...
复制链接

扫一扫