今日工作中遇到需求,要求js代码对表单中的input内容进行实时监听,当input中的值改变时触发一些事件。

按照常规思维,代码很快写完了。

 $(function () {
$("#input1").change(function () {
var vinput1 = $("#input1").val();
$("#input2").val(vinput1 );
});
$("#input2").change(function () {
var vinput2 = $("#input2").val();
$("#input3").val(vinput2 );
});
})

但是很快发现有问题:因为实际需求是通过脚本修改input的值,并触发事件,而change事件触发必须满足如下条件:

  1. 当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)
  2. 当前对象失去焦点(onblur)

通过查询,propertychange(ie)和input事件很快进入了我的视线范围。

onpropertychange,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;
oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

于是按照网上的方法完成了代码

 $(function () {
$("#input1").bind("input propertychange", function () {
var vinput1 = $("#input1").val();
$("#input2").val(vinput1 );
});
$("#input2").bind("input propertychange", function () {
var vinput2 = $("#input2").val();
$("#input3").val(vinput2 );
});
})

但是很快,我又发现了问题:就是通过鼠标键盘或js操作input1控件的值,确实可以触发相应事件进而修改input2的值。但是input2的值被修改后,无法触发它自己的事件去修改input3的值。

我猜测可能input和propertychange可能不支持级联触发。

于是我尝试通过trigger手动触发下级控件的input和propertychange事件,将代码修改成这样:

 $(function () {
$("#input1").bind("input propertychange", function () {
var vinput1 = $("#input1").val();
$("#input2").val(vinput1);
$("#input2").trigger("input");
$("#input2").trigger("propertychange");
});
$("#input2").bind("input propertychange", function () {
var vinput2 = $("#input2").val();
$("#input3").val(vinput2);
});
})

通过实验,证明可以通过这种方式进行多级的input内容修改监听。

但是这种方式也有自己的问题:它需要手动指定并通过trigger触发,如果要触发很多层,或不知道下一层是哪一个控件的话,就很难保证代码的清晰和整洁了。

javascript如何处理多级的实时监听的更多相关文章

  1. 实时监听 JavaScript改变 input 值 input输入框内容 value 变化实时监听

    思路:通过setInterval()方法去定时对比新旧值 当时候JavaScript的onchange 和onpropertychange(注意ie版本) 监听输入框input时间,人为改变值是可以触 ...

  2. javascript --- 实时监听输入框值的变化

    实时监听文本框值变化是非常常见的功能,通常最简单的办法就是用keyup,keydown来实现,但是这种方法有两个问题,一个是当直接复制粘贴的时候没法监听到事件,另外一个问题是在移动端,使用删除键删除输 ...

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

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

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

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

  5. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

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

    实时监听输入框值变化的完美方案:oninput & onpropertychange: 网址:http://www.cnblogs.com/lhb25/archive/2012/11/30/o ...

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

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

  8. js与jquery实时监听输入框值变化方法

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

  9. Android实时监听网络状态

    Android实时监听网络状态(1)   其实手机在网络方面的的监听也比较重要,有时候我们必须实时监控这个程序的实时网络状态,android在网络断开与连接的时候都会发出广播,我们通过接收系统的广播就 ...

随机推荐

  1. ArcGIS 网络分析[8.6] 资料6 创建网络分析图层及进行路径分析

    基于上篇所介绍的内容,就说说如何利用访问到的网络数据集,在Map中添加网络数据集图层.创建网络分析图层中的路径图层,并执行路径分析示例.

  2. MySQL在字段中使用select子查询

    前几天看别人的代码中看到在字段中使用select子查询的方法,第一次见这种写法,然后研究了一下,记录下来 大概的形式是这样的: select a .*,(select b.another_field ...

  3. HTML5 给图形绘制阴影(绘制五角星示例)

    几个属性 shadowOffsetX:阴影的横向位移量. shadowOffsetY:阴影的纵向位移量. shadowColor:阴影的颜色. shadowBlur:阴影的模糊范围. 属性说明 sha ...

  4. ES6 let和const命令(3)

    const 用来声明常量.一旦声明,就不能改变. const在声明必须初始化,只声明不赋值会出错 const的作用域与let一样,只在声明的块级作用域有效. const命令声明的常量也不提升,同样存在 ...

  5. DCL的失效:现实与初衷的背离

    最近看了Brian Goetz写的一篇有关DCL的文章:Double-checked locking: Clever, but broken.( 2001年发表于JavaWorld上) 这篇文章讲述了 ...

  6. 优化设计提高sql类数据库的性能

    前言 在一个项目中,技术的统一性是最重要的,数据库的设计则是重点中的重点.NoSQL 是目前最流行的数据库,但是其实用性和功能性远不如sql数据库. 实际很多SQL数据库被诟病的性能问题大多是源于程序 ...

  7. Qt数据库集成应用封装

    平时的大大小小的项目中,基本上都需要与数据库打交道,会遇到各种各样的应用场景,本人主要遇到四种场景1:数据库自动重连,例如mysql数据库中经常遇到服务器挂掉的情况,需要自动检测并重新连接数据库.2: ...

  8. selenium 封装

    周末无聊 在家封装一个pyselenium.可能这些封装大家都会使用,但是我还是根据我自己的习惯去选择性的去封装一些在我工作中用的,这样的话,我就不用去看selenium的api的,我可以根据我自己的 ...

  9. 2018年第一篇行动笔记:Reading Log

    今天读了盖兆泉的文章<美国教师怎么上阅读课>,觉得干货颇多,不仅仅针对儿童英语阅读,而且对生活的方方面面都有助益. 该文章主要内容摘要如下: 学生需要大量时间阅读 这里的阅读时间是特指花在 ...

  10. ngx-bootstrap使用02 Accordion组件的使用

    1 Accordion组件 该组件通过一个可折叠的控制面板去在有限空间内显示更多的信息 according组件在可折叠指令的最外层,该组件提供了一些列的项目列表去显示被折叠的内容,这些项目列表包含he ...