Legacy Edge（版本 44）中的清除输入事件

Question

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

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

并且我尝试了不同的方法来捕获 Edge 中的清除事件（当我用鼠标输入并在那里键入内容时，x 显示在文本框的右侧）事件（我的版本是 Microsoft Edge 44.18362.449.0).

<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>

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

这是一个可运行的片段：

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

假设一个

no, there's no event.

回答，如T.J。 Crowder 在他的评论中建议，我发现的最佳建议是使用样式

隐藏边缘清除按钮

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

备选方案，不隐藏边缘清除

否则，正如我在 Angular github repo 中提出并在此处改编为香草 Javascript 的那样，可以订阅 mouseup 事件作为解决方法并拦截 Edge clear，如下所示：

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

Legacy Edge（版本 44）中的清除输入事件

Event for clear input in Legacy Edge (version 44)

javascript

microsoft-edge

备选方案，不隐藏边缘清除