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（保留输入文本）之后，只调用char'a'并再次输入输入。

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

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

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

Answer 1

来自the docs：

根据要更改的表单元素的类型以及用户与元素交互的方式，更改事件将以不同的方式触发时刻：

元素在值更改后失去焦点，但不是已提交（例如，在修改<textarea>或<input type="text">的值后）。

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

尝试更改值并取消焦点，您将看到警报。

Answer 2

onchange事件通常在你输入焦点后更改文本输入的值时触发，因为这也是这种情况......但是当调用带有preventDefault的函数时，它不会被触发，这不是预期的行为!!!

preventDefault应该阻止调用它的keydown事件的默认行为而不是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的想法改为一个修改后的解决方案＆＃34;脏＆＃34;但工作可能会。我不太喜欢，但目前我没有发现它更好。

＆＃13;

$('#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');
  	});
  }
});

＆＃13;

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

＆＃13;

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

在keydown事件中使用preventDefault（），onchange事件不会触发

3 个答案: