用js有两种写法：

法一：

  1. <!DOCTYPE HTMl>
  2. <html>
  3. <head>
  4. <title> new document </title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. </head>
  7. <body>
  8. <div id="msg"></div>
  9. <input id='txt' value="" />
  10. <input id='btn' value="点我" type="button" onclick="ff()" />
  11. <script>
  12. //当状态改变的时候执行的函数
  13. function handle() {
  14.     document.getElementById('msg').innerHTML = "输入的文字为：" + document.getElementById('txt').value;
  15. }
  16. if(/msie/i.test(navigator.userAgent)) {   //ie浏览器
  17.     console.log("ie浏览器")
  18.     //document.getElementById('txt').onpropertychange = handle;
  19.     document.getElementById('txt').attachEvent("onpropertychange", handle);
  20. }
  21. else {//非ie浏览器，比如Firefox
  22.     console.log("非ie浏览器")
  23.     document.getElementById('txt').addEventListener("input", handle, false);
  24.     //document.getElementById('txt').watch('a', fn);
  25. }
  26. function ff() {
  27.     document.getElementById('txt').value=Math.random();
  28. }
  29. </script>
  30. </body>
  31. </html>

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

  1. addEventListener，但是，ie11却不能通过
  1. /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 浏览器所支持功能的方法存在，即直接检测对功能的支持：

  1. <!DOCTYPE HTMl>
  2. <html>
  3. <head>
  4. <title> new document </title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. </head>
  7. <body>
  8. <div id="msg"></div>
  9. <input id='txt' value="" />
  10. <input id='btn' value="点我" type="button" onclick="ff()" />
  11. <script>
  12. //当状态改变的时候执行的函数 
  13.  
  14. function handle() {
  15.     document.getElementById('msg').innerHTML = "输入的文字为：" + document.getElementById('txt').value;
  16. } 
  17.  
  18. function registerEvent(sTargetID, sEventName, fnHandler) {
  19.     var oTarget = document.getElementById(sTargetID);
  20.     if (oTarget != null) {
  21.         if (oTarget.addEventListener) {
  22.             oTarget.addEventListener(sEventName, fnHandler, false);
  23.         } else {
  24.             var sOnEvent = "on" + sEventName;
  25.             if (oTarget.attachEvent) {
  26.                 oTarget.attachEvent(sOnEvent, fnHandler);
  27.             }
  28.         }
  29.     }
  30. }
  31. registerEvent('txt',"input",handle);
  32. </script>
  33. </body>
  34. </html>

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

法三：

使用jquery实现

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

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

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

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

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

  2. js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & 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. Hibernate之一对一关联映射

    Hibernate中一对一关联映射共分为两种,一种是一对一主键关联映射,另一种是一对一唯一外键关联映射.下面简单介绍一下这两种关联映射. 一对一主键关联映射 一对一主键关联映射的两个实体有相同的ID. ...

  2. 在 WF 4 中编写自定义控制流活动

    在 WF 4 中编写自定义控制流活动 Leon Welicki 控制流是指组织和执行程序中各个指令的方法. 在 Windows Workflow Foundation 4 (WF 4) 中,控制流活动 ...

  3. .NET破解之爱奇迪（二）

    爱奇迪的其他系统软件我不感兴趣,但这个Database2Sharp看起来好像很有用的. 官网介绍: 一个简单点击几次鼠标就能完成一周代码量的代码生成工具,效率惊人.友好体贴,真正的开发好伴侣,提供了对 ...

  4. ibatis自定义数据类型在不支持中文的数据库存储汉字

    道理很简单,把gbk的汉字转换成iso编码存进数据库就可以了,读出来的时候把iso转换成gbk还原出原始的汉字. ibatis可以自定义类型处理器,在这里面做编码转换再适合不过了! sqlmap-co ...

  5. dsPIC33EP 时钟初始化程序

    //文件名p33clk.h #ifndef _P33CLK_H_ #define _P33CLK_H_ //#include "p33clk.h" #define WDT_ENB ...

  6. 【转】linux下的单线程

    传统的每个进程中只有一个线程在执行,称作单线程方法.MS-DOS是一种支持单用户进程和单线程的操作系统,UNIX支持多用户进程,但只支持每个进程一个线程,WINDOWS 2000(W2K).SOLAR ...

  7. 从CM刷机过程和原理分析Android系统结构

    前面101篇文章都是分析Android系统源代码,似乎不够接地气. 假设能让Android系统源代码在真实设备上跑跑看效果,那该多好.这不就是传说中的刷ROM吗?刷ROM这个话题是老罗曾经一直避免谈的 ...

  8. 【Oracle】Windows定时计划每天备份数据库

    脚本 OracleBakEveryDay.bat @echo off echo ================================================ echo Window ...

  9. WebService注解

    package cn.itcast.service; import javax.jws.WebMethod; import javax.jws.WebParam; import javax.jws.W ...

  10. 工作总结 表单提交中 Input 设置 disabled readonly

    input框里面添加disabled属性之后,该内容就无法向上提交  需要的时候也可以再移除disabled readonly这个属性来禁止用户修改, 可以正常提交. Hiddent 隐藏  也可以正 ...