【问题标题】:HTML Input on change of value值变化时的 HTML 输入
【发布时间】:2010-05-13 11:06:27
【问题描述】:

我有一个输入标签。该标签没有关闭自动完成功能,因此,不一定需要释放一个键来更改该字段的值并聚焦另一个。我的问题是:我怎样才能检测到这个特定字段的任何值变化,比如 e。 G。

<input onvaluechange="//do following..." />

JavaScript 属性 onchange 不会在值更改时触发,只会在模糊、焦点等更改时触发...

编辑:它也不一定是按键。由于具有自动完成功能,用户只需鼠标单击自动完成结果即可更改值。这不会触发 onkeydown 事件。

【问题讨论】:

    标签: html events input


    【解决方案1】:

    也不一定是按键。由于自动补全

    ...以及许多其他非基于键的操作,例如右键单击剪切/粘贴、拖放、撤消/重做、拼写检查调整等。

    HTML5 定义了一个oninput 事件来捕获所有直接更改。

    不幸的是,今天的浏览器支持不存在(IE 不支持,并且其他一些存在一些错误),所以如果您确实需要检测早于onchange 的输入值的所有更改,您所能做的就是使用setInterval 添加一个轮询器,不断与之前的值进行比较。

    【讨论】:

      【解决方案2】:
      【解决方案3】:

      我遇到了类似的问题,绑定到十几个不同的事件并不能解决问题,因为改变输入值的方法有很多,正如 bobince 所指出的那样。

      所以 - 我最终写了一个简单的 jQuery 监控插件,它本质上是通用的。 有了它你可以监控输入值变化、textarea文本变化、div内容变化等:

      https://github.com/nixd3v/monitor

      跟踪 div 内容变化:

      $.monitor('add', function(){return $("div#someDiv").html()}, function(){
          console.log('Div content changed');
      });
      

      跟踪输入值变化:

      $.monitor('add', function(){return $("#password").val()}, function(){
          console.log('input value changed');
      });
      

      当然,它也使用循环,但不是通过 setInterval,而是通过使用 setTimeout 和一个自动执行的匿名函数:

      (function(){
          // do some stuff
          setTimeout(arguments.callee, 100);
      })();
      

      这是做什么的 - 这保证了在您的代码执行之前不会进行下一次调用。如果您在代码中使用轮询 - 这是正确的做法。

      【讨论】:

      • 尊敬的 ;) 然而,目前我无法使用可以测试它的计算机:(
      • 这个 github 项目已经不存在了。
      【解决方案4】:

      您可以使用onKeyPress 属性来监控用户输入的更改。

      例如:

      <input type='input' onKeyPress='SomeScriptMethod();'>
      

      【讨论】:

      • 这仍然不适用于自动完成或使用鼠标剪切/粘贴文本时。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-06-13
      • 2010-09-15
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多