js监听文本框变化事件

时间：2021-06-10 00:39:29

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

});

js监听文本框变化事件的更多相关文章

  1. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  2. js监听文本框值变化事件，就oninput &amp&semi; onpropertychange &amp&semi; onkeyup &amp&semi; onchange的区别

    在Web前端项目中实时监听文本框的值变化是非常常见的功能,通常最简单最容易想到的是onkeyup和onchange事件,但是在使用onkeyup来监听键盘事件的时候,监听不到鼠标右键的粘贴.复制的操作 ...

  3. 实时监听文本框输入 oninput、onchange与onpropertychange事件的用法和区别

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框hu9i动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onke ...

  4. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

  5. 监听文本框输入开发仿新浪微博限制输入字数的textarea插件

    监听文本框输入 Firefox.Chrome.IE9,IE10 均支持 oninput 事件,此外所有版本的 IE 均支持 onpropertychange 事件. oninput 事件在用户输入.退 ...

  6. IOS NSNotificationCenter（通知 的使用）监听文本框的文字改变

    监听文本框的文字改变 * 一个文本输入框的文字发生改变时,文本输入框会发出一个UITextFieldTextDidChangeNotification通知 * 因此通过监听通知来监听文本输入框的文字改 ...

  7. 实时监听input标签输入 实时监听文本框输入 避免中文输入法无法触发onkeyup事件的问题

    前言: 对于实时监听输入,这种需求大多数都是用于一个联想字提醒,智能提醒.大家都知道onkeydown,onkeypress,onkeyup的在监听中文输入法或者右键粘贴的时候都存在一些弊端,不是那么 ...

  8. JS监听input框的回车事件、属性值改变事件

    一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...

  9. 2016-1-6第一个完整APP 私人通讯录的实现 2：增加提示用户的提示框，监听文本框

    一:在登录时弹出提示用户的提示框: 1.使用第三方框架. 2.在登陆按钮点击事件中增加如下代码: - (IBAction)loginBtnClicked { NSString *acount = se ...

随机推荐

  1. argparse解析参数模块

    一.简介: argparse是python用于解析命令行参数和选项的标准模块,用于代替已经过时的optparse模块.argparse模块的作用是用于解析命令行参数,例如python parseTes ...

  2. 一步一步搭框架&lpar;asp&period;netmvc&plus;easyui&plus;sqlserver&rpar;-02

    一步一步搭框架(asp.netmvc+easyui+sqlserver)-02 我们期望简洁带前台代码,如下: <table id="dataGrid" class=&quo ...

  3. 从问题域出发认识Hadoop生态系统

    近些年来Hadoop生态系统发展迅猛,它本身包含的软件越来越多,同时带动了周边系统的繁荣发展.尤其是在分布式计算这一领域,系统繁多纷杂,时不时冒出一个系统,号称自己比MapReduce或者Hive高效 ...

  4. Java eclipse export jar包 包括第三方引入的jar

    1.安装fatjar插件 2.export jar 说明:安装后,操作说明以官网为准,不同的版本会有不同的右键菜单,我的版本(Eclipse Java EE IDE for Web Developer ...

  5. git push提示或错误

    当 git 和 gerrit 一起使用的时候,你创建了一个 tag,现在需要 push 到远程仓库,当你没有权限的时候,会出现如下提示: $ git push origin v20150203 Tot ...

  6. 限制TextBox输入，只能输入Double类型数字

    public class TextBoxDouble : TextBox { public TextBoxDouble() { KeyDown += TextBoxDouble_KeyDown; Te ...

  7. 为什么亚马逊云计算中的DNS服务叫Route53？

    最近在用亚马逊的云计算服务,看到它的DNS服务的名字叫做"Route 53".这个名字让我很好奇,为什么叫"Route 53"呢?有什么特殊含义? 看到了这个Q ...

  8. 使用&dollar;&period;post和action或servlet交互 URL出现 http&colon;&sol;&sol;localhost&colon;8080&sol;&period;&period;&sol;&lbrack;object&percnt;20Object&rsqb; 错误的问题解决

    使用$.post时,如下所示: $.post({ url : "./test/ajaxTest", }); 控制台报:There is no Action mapped for n ...

  9. 201521123039《java程序设计》第五周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句 ...

  10. 转载泡泡机器人——IMU预积分总结与公式推导1

    IMU预积分技术最早由T Lupton于12年提出[1],C Forster于15年[2][3][4]将其进一步拓展到李代数上,形成了一套优雅的理论体系.Forster将IMU预积分在开源因子图优化库 ...

相关文章