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

【问题标题】：Event for clear input in Legacy Edge (version 44)Legacy Edge（版本 44）中清除输入的事件
【发布时间】：2021-04-07 11:13:48
【问题描述】：

我有一个简单的 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>

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

这是一个可运行的 sn-p：

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>

【问题讨论】：

顺便说一句，Internet Explorer（例如 Windows 10 上的 1909 版）也有那个“x”来清除输入，但 IE 的稍微修改的版本确实有效，inputaddEventListener 和oninput 对清除事件做出反应。
只是出于好奇，为什么需要支持 Legacy Edge？用户必须非常努力地尝试才能升级到 Chromium Edge，因此在野外应该几乎没有用户使用它...
@T.J.Crowder 这是我发现安装在公司笔记本电脑上的版本（它是意大利的一家大公司，拥有庞大的 ICT 部门。我不知道他们在国外办公室安装的版本，老实说）。所以在我的公司里，我猜想有很多内网用户。但是好吧，这不是一个真正的问题，我们可以使用chrome（或firefox），只是为了知道。
谢谢！我只是好奇，它不会改变或使问题无效。（顺便说一句，我想我以前在某个地方见过这个问题，但我没有在这里找到它。遗憾的是，我认为答案是“不，没有事件。”）
@T.J.Crowder 他们已经确认我们将在接下来的几个月内为所有用户推出更新，所以一切正常 ;-)

标签： javascript microsoft-edge

【解决方案1】：

假设一个

不，没有事件。

回答，作为 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 中提出的，并在此处由我改编为 vanilla Javascript，可以订阅 mouseup 事件作为一种解决方法，并按如下方式拦截 Edge：

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

【讨论】：