【问题标题】:Observe fields on a form and report changes观察表单上的字段并报告更改
【发布时间】:2012-05-10 17:30:50
【问题描述】:

观察表单上的字段并报告更改

我现在编写了一个简单的实用程序(观察者模式的一部分)来观察表单每个字段中所做的更改。

var idInt = setInterval(function() {
  // each input is a document.getElementById(id)
  var len = inputList.lenght;

  while(len--) {
    //send value to somewhere
    someWhere(ininputList[len].value);
  }
}, 40)

但我有以下问题:

  1. 使用鼠标更改值时(剪切/粘贴)
  2. 以编程方式更改值时

someWhere(ininputList[len].value); 获取的值即使我尝试向元素添加事件(onchange、oncut、onpaste、oninput、onkeyup)也不会刷新以避免 setIntervalloop,但是当我尝试以编程方式更改值时不会触发这些事件。

这将是观察元素值变化的更好方法(输入 [按钮 | 文本 | 密码 | url | 电子邮件],单选,复选框,选择)考虑到程序化变化监控和通过界面用户,

注意:我正在寻找原始解决方案,没有 jquery、原型、js 类或任何框架,只有原生 javascript

【问题讨论】:

  • 为什么不能绑定change事件? -- input.addEventListener('change', myFunction, false) ?
  • 我需要实时更改,而不是在用户更改字段时
  • 在程序化中完成更改时也需要触发
  • 那么您是说即使您更改了输入中的值,您定期调用的函数也会看到旧值?
  • 不,我需要新值

标签: javascript observer-pattern


【解决方案1】:

我不确定是什么问题,因为下面的代码有效

setInterval(function() {
  var inputList = document.getElementsByTagName('input')
  var len = inputList.length;

  while(len--) {
    console.log(inputList[len].value);
  }
}, 4000)​

它每 4 秒打印一次更改的值,您可以在此处查看它的运行情况http://jsfiddle.net/QKqzT/

【讨论】:

  • 很好奇。我做了一个实现,其中我有一个模型,并且报告了几个元素(表单、parafos 等),一切都基于观察者和一个通知模型中感兴趣的元素的 pubsub
猜你喜欢
  • 2016-09-01
  • 2012-04-07
  • 1970-01-01
  • 1970-01-01
  • 2014-11-02
  • 2022-01-21
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多