keydown 事件：如何使用 preventdefault 而不触发更改事件

Question

我需要截取和替换输入文本中的字符，因此输入文本的 keydown 事件处理程序有以下代码：

let my_input = document.querySelector("#my_input");
    
my_input.addEventListener('keydown', (e) => {
 e.target.value = 'toto';
   e.preventDefault();
   var event = new Event('input', { 'bubbles': true, 'cancelable': true });
   e.target.dispatchEvent(event);
});


my_input.addEventListener('change', (e) => {
  //never fired even you focus out the input text
    console.log("changes are coming");
});

 
<input type="text" id="my_input" pattern="^\d+((\.|\,)(\d{1,2})?)?"  />        

我觉得奇怪的是，当 focusout 事件被触发时，change 事件永远不会被触发。

您了解发生了什么以及如何使其正常工作吗？

Answer 1

使用onblur 事件。 e.preventDefault() 通过更改 input 的正常行为导致您的问题。

<input type="text" id="my_input" onblur="myFunction()"/>  
<script>
let my_input = document.querySelector("#my_input");
var changed = false;
    
my_input.addEventListener('keydown', (e) => {
   e.target.value = 'toto';
   e.preventDefault();
   changed = true;
   var event = new Event('input', { 'bubbles': true, 'cancelable': true });
   e.target.dispatchEvent(event);
});


function myFunction(){
   if(changed){
    console.log("changes are coming");
    changed = false;
  }
}
</script>