在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感。而采用onchange时间又往往是在输入框失去焦点(onblur)时候触发,有时候并不能满足条件。

首先看一下dom中元素事件:
onpropertychange: IE下,当一个HTML元素的属性改变的时候,都能通过 onpropertychange来即时捕获。onchange在属性值改变时还必须使得当前元素失去焦点(onblur)才可以激活该事件。 在用js脚本改动该元素值时候亦能触发onpropertychange事件。
oninput: 是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。
onchange: (a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效);(b)当前对象失去焦点(onblur);

因此,可以采用以下代码实时监听输入框值变化

$("#input_test1").bind("input propertychange change",function(event){$("#input_test2").val($("#input_test1").val());
});

兼容IE

转自http://blog.csdn.net/otengyue/article/details/50708277

转载于:https://www.cnblogs.com/anxiaoyu/p/7844615.html

jquery实时监听输入框值变化相关推荐

  1. 实时监听输入框值变化的完美方案:oninput onpropertychange

    实时监听输入框值变化的完美方案:oninput & onpropertychange 原文:实时监听输入框值变化的完美方案:oninput & onpropertychange 在 W ...

  2. html div实时监听,jquery实时监听div高度变化

    素胚勾勒不出你 Document      dianwo

  3. angular监听输入框值的变化_angular 实时监听input框value值的变化触发函数方法

    用angulajs + ionic 做了一个登陆页面.效果要通过监听输入框的变化来判断登陆按钮是否可点击.当至少一个输入框为空时登录按钮不可点击.一开始是用的jquery的方法做的,后来发现刷新当前页 ...

  4. javascript监听输入框_html通过JS/jQuery实现 实时监听输入框input的内容

    最近在做一个功能:联想搜索功能.具体实现做法如下:通过实时监听输入框input的内容,来实时发起网络请求,向后台获取联想到的搜索内容并展示到前台.那么该如何实现input的实时监听呢 做法一(jQue ...

  5. 6- js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 标题: js监听输入框值的即时变化onpropertychange.oninput事件 参考: http://m.jb51. ...

  6. asp.net监听输入框值的即时变化onpropertychange、oninput

    要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的 ...

  7. JS实时监听DOM元素变化 - MutationObserver

    使用 MutationObserver API实时监听DOM元素变化 创建 MutationObserver 实列,接受一个用于监听到DOM元素变化的回调函数 const handleListenCh ...

  8. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)

    onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案) 参考文章: (1)onchange监听inpu ...

  9. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法

    1. onchange事件监听input值变化的使用方法: <input id="test"></input>$("input").ch ...

最新文章

  1. torch 多进程卡死
  2. QT的QBluetoothServiceDiscoveryAgent类的使用
  3. docker+open vswitch多宿主间容器互连构建tomcat服务
  4. 飞秋教程:文件断点续传
  5. 冒泡排序法应用排身高
  6. GoAhead2.5源代码分析之1-用户管理(um.c)
  7. ----------------------------------------spring 整合jdbc---------------------
  8. Interesting Finds: 2008.04.06
  9. 拓端tecdat|R语言线性分类判别LDA和二次分类判别QDA实例
  10. 1074 Reversing Linked List (25)(25 分)
  11. 动态规划之子串和(续。升级版)nyoj745
  12. IC卡应用系统开发-(一)卡片读写
  13. 交安ABC考试单选练习题库
  14. 吴恩达-deep learning 02.改善深层神经网络:超参数调试、正则化以及优化Week1
  15. 关于 SVN状态图标不显示的问题(只显示绿色钩匹配) 的解决方法
  16. 对圆柱面的曲面积分_积分曲面为圆柱面的曲面积分的计算
  17. FFmpeg 常用命令汇总
  18. 计算机显示u盘容量只有1m,为什么新买的U盘容量大小与实际显示大小不一样?...
  19. kafka topic消息分配partition规则
  20. 电脑游戏业编年史之十二──叛逆

热门文章

  1. javascript 自定义Map
  2. Spark常见问题解决办法
  3. 使用canvas绘制时钟
  4. Python ValueError: IO operation on closed file
  5. JavaScript实现自适应宽度的瀑布流
  6. [摘抄]软件设计模式的几个原则
  7. 为什么修改了ie级别里的activex控件为启用后,还是无法下载,显示还是ie级别设置太高?
  8. 4 网络、挂载、关机
  9. 猿课python 第三天
  10. 图嵌入综述 (arxiv 1709.07604) 译文五、六、七