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