用于清除遗留边缘中的输入的事件（版本44）

Question

我有一个简单的html输入字段

<input id="query" type="text" oninput="QueryInput(this.value)"  onchange="QueryChange(this.value)">

我尝试了不同的方法来捕获Edge（我的版本是Microsoft Edge 44.18362.449.0)中的clear（当我用鼠标输入文本框以在其中键入内容时，文本框右侧会出现X）事件。

<p id="demo_typed"></p>
<p id="demo_typing"></p>
<p id="demo_oninput"></p>
<p id="demo_onchange"></p>

<script>
function QueryChange(query) {
  document.getElementById("demo_onchange").innerHTML = `You changed to ${query}`;
}
function QueryInput(query) {
  document.getElementById("demo_oninput").innerHTML = `You inputted ${query}`;
}
document.getElementById("query").addEventListener('input', (event) => {
  document.getElementById("demo_typing").innerHTML = `You are typing ${event.target.value}`;
});
document.getElementById("query").addEventListener('change', (event) => {
  document.getElementById("demo_typed").innerHTML = `You typed ${event.target.value}`;
});
</script>

但是它们都没有对清除事件做出反应（除了在它之后，当鼠标离开输入时可以触发的更改）：这是不可行的吗？

function QueryChange(query) {
  document.getElementById("demo_onchange").innerHTML = `You changed to ${query}`;
}
function QueryInput(query) {
  document.getElementById("demo_oninput").innerHTML = `You inputted ${query}`;
}
document.getElementById("query").addEventListener('input', (event) => {
  document.getElementById("demo_typing").innerHTML = `You are typing ${event.target.value}`;
});
document.getElementById("query").addEventListener('change', (event) => {
  document.getElementById("demo_typed").innerHTML = `You typed ${event.target.value}`;
});

<p><strong>Note:</strong> The question is specific to Legacy Edge, not the newer Chromium-based Edge.</p>

<input id="query" type="text" oninput="QueryInput(this.value)"  onchange="QueryChange(this.value)">

<p id="demo_typed"></p>
<p id="demo_typing"></p>
<p id="demo_oninput"></p>
<p id="demo_onchange"></p>

Answer 1

假设a

不，没有活动。

回答，作为T.JCrowder在他的评论中建议，我发现最好的建议是用一个样式隐藏边缘清除按钮

<style>
input::-ms-clear {
    display: none
}
</style>

<form id="myForm" onsubmit="event.preventDefault();"> 

function clear_input() {
  document.getElementById("myForm").reset();
  document.getElementById("demo_typed").innerHTML = '';
  document.getElementById("demo_typing").innerHTML = '';
  document.getElementById("demo_oninput").innerHTML = '';
  document.getElementById("demo_onchange").innerHTML = '';
}

document.getElementById("myBtnClear").addEventListener("click", function() {
  clear_input();
});  

document.getElementById("query").addEventListener('mouseup', (event) => {
  beforeVal = event.target.value;
  setTimeout(() => {
    afterVal =event.target.value;
    if (beforeVal !== '' && afterVal === '') {
        clear_input();
    }
  }, 1);
  
});