按下事件中的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();
    }
});

在调用onchange（保留输入文本）后，仅将字符'a'保留，并再次输入。

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

用onchange事件检查值是否已更改？ 一对旧/新值变量？ 一个布尔值？ 可以与之互动吗？

Keydown事件默认值也可能会这样做。

Answer 1

从文档 ：

根据要更改的表单元素的类型以及用户与该元素进行交互的方式，更改事件在另一个时刻触发：

• 当元素的值更改后失去焦点但未提交时（例如，在编辑<textarea>或<input type="text"> ）。

在您的示例中就是这种情况。

尝试更改值并散焦，您将看到警报。

Answer 2

通常，在更改文本输入的值然后失去焦点时便会触发onchange事件，在这种情况下也是如此。但是在调用带有preventDefault的函数时，不会触发onchange事件。相当预期的行为！！！

preventDefault应该防止keydown事件的默认行为，而不是onchange事件的默认行为，而onchange事件实际上无法取消...

我想问题是不同的：

该值的默认设置似乎与JQuery的方式有所不同

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

可能是因为仅更改了提交的值，而不更改了DOM元素...如果将此行更改为

$(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" /> 

Answer 3

将@Kaddath的想法作为修订后的解决方案有点“肮脏”，但可能会起作用。 我不太喜欢，但此刻我并没有发现更好。

 $('#textbox1').on('change', function() { alert('onchange called'); }); $('#textbox1').on('keydown', function(event) { var oldValue = event.target.value; if (event.keyCode == 46) { //DELETE event.target.value = "" } else 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'); }); } }); 

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