Javascript 防止ESC清除<；输入类型="；搜索“&燃气轮机；在Chrome上（或添加按钮以清除文本，而不使用type="；search"；）

我花了好几个小时在我的代码中追踪这个问题，

ESC

正在清除输入文本，结果发现不是我的代码在这样做。我发现

ESC

清除

中的文本

因此，当我发现这一点时，我认为我所有的问题都解决了——只有删除

type=“search”

才能删除按钮以清除输入中的当前文本。我想我可以用一个快速的CSS规则来恢复它，但是没有效果

• -webkit外观：searchfield

因此，接下来我尝试在搜索字段上阻止

ESC

的操作，但无法使用：

• evt.preventDefault（）

• evt.stopPropagation（）

• evt.stopImmediatePropagation（）

  ——技术上等同于

  evt.nativeEvent.stopImmediatePropagation（）

---

如何解决这个问题而不在DOM中创建怪物，或者在我的代码中重新设计浏览器的内置功能？

当按下esc键时，您可能必须跟踪该值并将searchbox值设置为最后一个值

像这样的东西可能有用

让searcText=“”；
常量输入=document.getElementById（“searchInput”）；
input.onkeyup=（e）=>{
如果（例如keyCode===27）{
input.value=搜索文本；
返回；
}
searchText=input.value；
}

当按下esc键时，您可能必须跟踪该值并将搜索框值设置为最后一个值

像这样的东西可能有用

让searcText=“”；
常量输入=document.getElementById（“searchInput”）；
input.onkeyup=（e）=>{
如果（例如keyCode===27）{
input.value=搜索文本；
返回；
}
searchText=input.value；
}

我感谢您的回复，但我认为这是我想要避免的“怪物”方法之一。在React中实现这一点要复杂得多。您可能最好编写自己的搜索组件，或者从npm获得一个，而不是试图绕过内置的浏览器行为，或者欣赏响应，但我认为这是我想要避免的“怪物”方法之一。在React中实现这一点要复杂得多。您可能最好编写自己的搜索组件或从npm获得一个，而不是试图绕过内置的浏览器行为