正确处理输入变更事件

它可能是更改事件的正确行为，但以下行为有点烦人。 从字段历史记录更新值时（请参阅下面的说明），不会触发事件。

请参阅下面的示例代码。 结果输入字段使用输入字段“input1”的更改进行更新。 表单和提交按钮不完全相关，但需要提交表单以使浏览器保留字段值的历史记录。 去测试：

1. 输入字段中的任何输入（比如ABC）
2. 提交表格
3. 从1（A）输入输入的第一个字符
4. 使用向下箭头选择上一个值+ Enter
5. 或使用鼠标从历史记录中选择先前的值未检测到输入更改。

应该修改哪个事件/应该如何修改，以便在更改输入值时生成事件。

谢谢。

---

     Result: 
  Submit 
  $(document).ready(function() { $('#input1').change( function(){ $('#result').val($('#input1').val()); }); });    

Answer 1

我认为这与jQuery无关。

当控件的内容发生更改且控件失去焦点时，应调度更改事件。 在实践中，改变事件的实现在浏览器中是不一致的，例如，当点击单选按钮而不是当他们失去焦点时，Firefox会调度更改事件。 同样在IE中，从先前值列表中选择值然后导致模糊事件不会触发更改事件。

请注意，要使表单控件成功，它们必须具有带值的name属性。 一个简单的测试用例是：

一种解决方案是使用模糊事件，并将控件的当前值与其defaultValue进行比较 – 如果它们不同，则执行您要为更改事件执行的任何操作。 如果值可能会多次更改，则在第一次之后需要与最后一个值 onblur而不是defaultValue进行比较 。

无论如何，这是一个可以调用onblur来查看文本输入是否已更改的函数。 如果你想将它与其他类型的表单控件一起使用，它需要一些工作，但我不认为这是必要的。

Answer 2

尝试keyup事件：

  $(document).ready(function() { $('#input1').keyup( function(){ $('#result').val($('#input1').val()); }); }); 

http://jsfiddle.net/kaptZ/7/

Answer 3

看起来它肯定是一个浏览器错误。 除了使用焦点和模糊实现自己的更改处理程序之外，您无能为力。 这个例子不是很可重用，但它解决了这个问题，可以作为可重用的东西的灵感来源。

http://jsfiddle.net/kaptZ/9/

 var startValue; var input1 = $('#input1'); input1.focus(function(){ startValue = this.value; }); input1.blur(function(){ if (this.value != startValue) { $('#result').val(this.value); } }); 

一个脏的替代方法是使用autocomplete =“off”

Answer 4

看起来这个错误应该在2009年11月修复。

在现代浏览器中，您可以使用input事件并在键入时进行更新。 它可以绑定到文本输入 ：

 $('#input1').bind('input', function(){ $('#result').val($('#input1').val()); }); 

或者到表格 ：

 $('#input1').closest('form').bind('input', function(){ $('#result').val($('#input1').val()); });