要即时的监听输入框(input,textarea)内容的变化,有一下几种方法

keydown,keypress,keyup事件   这些事件监听不了右键的复制,剪切和粘贴这些操作,在某些版本的浏览器中也会失效

change事件           1. 当对象属性改变,并且是键盘或者鼠标激发的,脚本触发无效
                2. 当对象失去焦点(onblur)触发,且内容必须发生改变,若先改变再还原,则失焦时不触发

input和propertychange事件    input是HTML5标准事件,在输入框的内容变化后立即触发,oninput能兼容到IE9.
               propertychange是IE专属的事件,对象属性发生改变时触发

               oninput限制:  1. js改变value时,不触发
                        2. select选取值,不触发
               onpropertychange限制: input为disable=true时,不触发

Bug
oninput和onpropertychange这两个事件在IE9中有个Bug,就是通过右键菜单的
剪切和删除命令删除内容时候不会触发,其他IE版本正常,目前无更好的方案。

onpropertychange在IE中,若用domObj.className="xx"来修改输入框的样式,
会导致IE下会有输入第一个字符的时候onpropertychange不触发的bug,因此要用
domObj.style.color="xx"来设置。

input实时监听value change的更多相关文章

  1. input实时监听(input oninput propertychange onpropertychange)

    本文实例讲述了js与jquery实时监听输入框值的oninput与onpropertychange方法.分享给大家供大家参考.具体如下: 最近做过一个项目,需求是下拉框里自动匹配关键字,具体细节是实时 ...

  2. input实时监听控制输入框的输入内容和长度,并进行提示和反馈

    一.前言 在MVVM模式下,有个双向数据绑定(data-binding)的优势,可以通过viewmodel实时的监听用户操作,也可以将model的改动实时的反馈到界面上. 那么,在传统的js操控DOM ...

  3. 关于input内容监听(change)

    js的话利用input的onchange事件 而jquery的话利用change()函数,代码如下: <!DOCTYPE html> <html> <head> & ...

  4. input实时监听

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. jquery input 实时监听输入

    $('input').bind('input propertychange', function() { alert('hello world') });

  6. 实时监听input输入内容的N种方法

    现在有一个需求,需要我们实时监听input输入框中的内容,从而带来更好的用户体验,而不是等我们全部输入完毕才告诉我们格式不对首先我们创建一个input输入框 <form name='loginF ...

  7. js 实时监听input中值变化

    注意:用到了jquery需要引入jquery.min.js. 需求: 1.每个地方需要分别打分,总分为100; 2.第一个打分总分为40; 3.第二个打分总分为60. 注意:需要判断null.&quo ...

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

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

  9. 实时监听input输入框value的变化:

    HTML5 标准事件 oninput 和 IE 专属事件 onpropertychange 事件实时监听输入框value的变化 oninput 事件在用户输入时触发. 该事件在 <input&g ...

随机推荐

  1. js 通过身份证识别生日、年龄、性别

    <script>function IdCard(UUserCard,num){   if(num==1){       //获取出生日期       birth=UUserCard.sub ...

  2. mybatis实战教程(mybatis in action),mybatis入门到精通

    转自:http://www.yihaomen.com/article/java/302.htm (读者注:其实这个应该叫做很基础的入门一下下,如果你看过hibernate了那这个就非常的简单) (再加 ...

  3. Extract Fasta Sequences Sub Sets by position

    cut -d " " -f 1 sequences.fa | tr -s "\n" "\t"| sed -s 's/>/\n/g' & ...

  4. hadoop 2.x 完全分布式搭建

    HDFS HA 集群搭建: DN(DataNode):3个:NN(NameNode):2:ZK(ZooKeeper):3(大于1的奇数个):ZKFC:和NN在同一台机器:JN:3:RM(Resourc ...

  5. 【BZOJ-3784】树上的路径 点分治 + ST + 堆

    3784: 树上的路径 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 462  Solved: 153[Submit][Status][Discuss ...

  6. 【BZOJ-2400】Spoj839Optimal Marks 最小割 + DFS

    2400: Spoj 839 Optimal Marks Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 567  Solved: 202[Submit ...

  7. jquery插件-表单验证插件-demo

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 遵循PSR-4的自动加载

    一.简介 首先这里要了解PSR,Proposing a Standards Recommendation(提出标准建议)的缩写,就是一种PHP开发规范,让我们研发出来的代码更合理.更好维护.可读性更高 ...

  9. 远程连接RabbitMQ失败

    远程连接RabbitMQ失败 为了避免污染宿主系统环境,于是在虚拟机中搭建了一个linux环境并且按照了rabbitmq-server.然后在远程连接的时候一直连接失败. 官网上面给的例子都是在本地使 ...

  10. .net中ckeditor的应用

    ①js文件的引入 <script src="/public/ckeditor_4.4.7/ckeditor.js"></script> <script ...