正確處理輸入更改事件

它可能是更改事件的正確行爲，但下面的行爲有點煩人。當該值從字段歷史更新（請參閱下面的說明）時，事件不會被觸發。正確處理輸入更改事件

請參閱下面的示例代碼。結果輸入字段將隨輸入字段'input1'的更改而更新。表單和提交按鈕並不完全相關，但需要提交表單以使瀏覽器保留字段值的歷史記錄。要測試：

在字段中輸入的任何輸入（說ABC）
提交表單
輸入輸入的第一字符從1（A）
使用向下箭頭以選擇先前值+輸入
或使用鼠標從歷史記錄中選擇以前的值未檢測到輸入變化。

哪個事件/該代碼應如何修改，以便在輸入值更改時生成一個事件。

謝謝。

<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>

來源

2011-05-18 bsr

這裏有一個的jsfiddle能重現問題，請注意您必須提交幾個值的建議顯示。 http://jsfiddle.net/kaptZ/ – 2011-05-18 21:05:57

你的例子適用於我最新的chrome。你需要從領域模糊，以獲得頂部領域的工作。 – zsalzbank 2011-05-18 23:51:13

我覺得這無關與jQuery。

當控件的內容發生變化並且控件失去焦點時，應該調度change事件。在實踐中，改變事件的實現在瀏覽器中是不一致的，例如， Firefox單擊單選按鈕時會調度更改事件，而不是在失去焦點時調度。同樣在IE中，從先前值列表中選擇一個值，然後導致模糊事件不會觸發更改事件。

請注意，對於表單控件要成功，它們必須必須具有值的名稱屬性。一個簡單的測試案例是：

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

一種解決辦法是改用模糊事件和控制當前值比較其默認值 - 如果他們是不同的，執行不管它是你要爲改變事件做。如果該值可能會多次更改，第一次之後需要與上一個值 onblur比較，而不是默認值。

無論如何，這裏有一個函數可以調用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>

來源

2011-05-18 23:47:18 RobG

嘗試keyup事件：

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

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

來源

2011-05-18 21:06:07 digitalbath

什麼？你試過了嗎？不適合我！從建議列表中選擇一項不會填充#result – 2011-05-18 21:13:32

在Firefox中適用於我。你使用的是什麼瀏覽器？ – digitalbath 2011-05-19 22:59:50

看起來這絕對是一個瀏覽器的bug。除了用焦點和模糊來實現您自己的更改處理程序之外，您無能爲力。這個例子不是很可重用，但它解決了這個問題，可以用作可重用的東西的靈感。

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); 
    } 
});

髒選擇是使用自動完成= 「關閉」

來源

2011-05-18 21:17:54

它不適合我...我試過Chrome和Iceweasel（Firefox） – bsr 2011-05-18 21:27:21

什麼是行不通的？我在Chrome和FF上試過了，它工作。你確定你有正確的鏈接到正確版本的jsFiddle嗎？ http://jsfiddle.net/kaptZ/9/你必須離開現場後，用鼠標選擇一個條目或點擊進入 – 2011-05-18 21:47:23

謝謝..我認爲它可能只是在選擇後，而不是點擊某些地方後屏幕/其他字段..我的代碼是屏幕的一部分，通過輸入值更改，通過ajax更新'結果'字段。即使在用戶做出選擇後，'結果'字段也不會改變，這有點奇怪。因此，在上述情況下，只有當用戶將焦點從輸入字段中移出時，纔會觸發事件。它可能會令人困惑，因爲他們可能會希望在輸入字段中輸入正確的值時更新結果。 – bsr 2011-05-18 22:18:10

它看起來像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()); 
});

來源

2011-05-24 15:08:17 robertc

正確處理輸入更改事件

回答

相關問題