Question

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

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

在字段中输入任何输入（例如ABC）
提交表格
输入1（A）
使用向下箭头选择上一个值+ Enter
或使用鼠标从历史记录中选择上一个值未检测到输入更改。

此代码应该修改哪个事件/应该如何修改输入值时生成事件。

感谢。

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
    Result:<input type="text" id="result" readonly></input>

    <form method="post" action=""> 
        <input type="text" id="input1" />   
        <button type=submit>Submit</button>
    </form>
    <script >
        $(document).ready(function() {          
            $('#input1').change(
                function(){
                $('#result').val($('#input1').val());
            });      
        }); 
    </script>
</body>
</html>

Answer 1

我认为这与jQuery无关。

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

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

<form action="#"> 
    <input type="text" name="input1" onchange="alert('changed');">   
    <input type="submit">
</form>

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

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

<form action="#"> 
    <input type="text" name="input1" onblur="
      var changed = checkChanged(this);
      if (changed[0]) {
        alert('changed to: ' + changed[1]);
      }
    ">   
    <input type="submit">
</form>

<script type="text/javascript">

// For text inputs only
var checkChanged = (function() {

  var dataStore = [];

  return function (el) {
    var value = el.value,
        oValue;

    for (var i=0, iLen=dataStore.length; i<iLen; i+=2) {

      // If element is in dataStore, compare current value to
      // previous value
      if (dataStore[i] == el) {
        oValue = dataStore[++i];

        // If value has changed...
        if (value !== oValue) {
          dataStore[i] = value;
          return [true, value]; 

        // Otherwise, return false
        } else {
          return [false, value];
        }
      }
    }

    // Otherwise, compare value to defaultValue and
    // add it to dataStore
    dataStore.push(el, value);
    return [(el.defaultValue != value), value];
  }

}());
</script>

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

看起来this bug本应在2009年11月修复。

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

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

或form：

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

正确处理输入变更事件

4 个答案: