在keydown事件中的preventDefault（），onchange事件不觸發

Question

在keydown或keypress事件中調用preventDefault()，其中編程式更改的值不考慮更改，並且不會在輸入文本的出口處觸發onchange事件。

示例代碼：

$('#textbox1').on('change', function() { 
    alert('onchange called'); 
}); 

$('#textbox1').on('keydown', function(event) { 
    if(event.key=='a') { 

     $(this).val('A'); 
     //event.target.value = 'A'; 
     event.preventDefault(); 
    } 
}); 

平變化的呼叫（在離開輸入文本）數字僅炭「a」和離開輸入另一個時間之後。

小提琴代碼：http://jsfiddle.net/gxx5744s/1/

什麼用onchange事件來檢查值發生變化？一對舊/新的價值變量？一個布爾？ 可以與之互動嗎？

Keydown事件的默認大概也是這樣。

Answer 1

以@Kaddath的想法修改後的解決方案有點「髒」，但工作可能。 我不太喜歡，但目前我沒有找到更好的。

$('#textbox1').on('change', function() { 
 
\t alert('onchange called'); 
 
}); 
 
    
 
$('#textbox1').on('keydown', function(event) {  
 
    var oldValue = event.target.value; 
 
    
 
    if (event.keyCode == 46) { //DELETE 
 
    \t event.target.value = "" 
 
    } else 
 
\t \t event.target.value = event.key + event.target.value; 
 
    
 
    event.preventDefault(); 
 

 
    if (event.target.valueOnFocus === undefined) { 
 
    // set a new property on the input element 
 
    event.target.valueOnFocus = oldValue; 
 
    
 
    $(event.target).on('focus', function(event) { 
 
     // From the second time that enter on the input element, 
 
     // update the new property 
 
     event.target.valueOnFocus = event.target.value; 
 
    }); 
 
    
 
    $(event.target).on('blur', function(event) { 
 
     if (event.target.value !== event.target.valueOnFocus) 
 
     $(event.target).trigger('change'); 
 
    \t }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="textbox1" />

在小提琴：http://jsfiddle.net/gxx5744s/3/

Answer 2

從the docs：

根據一種形式的元素被改變，這樣，用戶與元素進行交互，改變事件觸發在不同的 時刻：

• 當元素在其值改變後丟失焦點，但不是 提交（例如在編輯值<textarea>或<input type="text">）。

你的例子就是這種情況。

嘗試更改值並且忽略，您會看到警報。

Answer 3

onchange事件通常會在您更改文本輸入的值時失敗，因爲它在這裏也是如此......但是，當調用preventDefault的函數被調用時，它不會被觸發，這不是預期的行爲！

的的preventDefault應該防止它被稱爲不onchange事件，這實際上不能被取消的keydown事件的默認行爲......

我想這個問題是不同的東西：

該值的默認設置，因爲似乎只是一個提交值改變不是DOM元素從JQuery的方式不同與

$(this).val('A');

也許......如果您更改此行

$(this).attr('Value','A');

其行爲與預期！

有意思的是，默認行爲不是既不設置屬性值也不是兩種方式都改變顯示，但必須有所不同！

編輯：對我來說，解表@Kaddath似乎是最合適的：

var change = false; 
 

 
$('#textbox1').on('change', function() { 
 
    alert('onchange called'); 
 
}); 
 

 
$('#textbox1').on('blur', function() { 
 
    if (change) { 
 
    alert('"onchange" called too'); 
 
    change = false; 
 
    } 
 
}); 
 

 
$('#textbox1').on('keydown', function(event) { 
 
    if (event.key == 'a') { 
 
    $(this).val('A'); 
 
    change = true; 
 
    event.preventDefault(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="textbox1" />