javascript - 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 事件永远不会被触发。

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

标签： javascript

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>