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})?)?"  />

对我来说，奇怪的是，当触发聚焦事件时，永远不会触发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>

keydown事件：如何在没有更改事件的情况下使用preventdefault

1 个答案: