防止 ESC 从 Chrome 上的 <input type="search"> 清除文本（或添加按钮以清除文本而不使用 type="search"
Posted
技术标签:
【中文标题】防止 ESC 从 Chrome 上的 <input type="search"> 清除文本（或添加按钮以清除文本而不使用 type="search"）【英文标题】：Prevent ESC from clearing text from <input type="search"> on Chrome (or add button to clear text without using type="search") 【发布时间】：2020-11-13 14:43:13 【问题描述】：我花了几个小时在我的代码中追踪这个问题，ESC 正在清除输入文本，却发现不是我的代码在这样做。我发现ESC 清除了来自<input type="search" /> 的文本。
所以当我发现这一点时，我认为我的所有问题都已解决 - 只有删除 type="search" 才会删除从输入中清除当前文本的按钮。我想我可以用一个快速的 CSS 规则来恢复它，但它没有效果。
-webkit-appearance: searchfield;
所以接下来我尝试阻止ESC 在搜索字段中的操作，但无法做到这一点：
evt.preventDefault()
evt.stopPropagation()
evt.stopImmediatePropagation() -- 技术上等同于 React evt.nativeEvent.stopImmediatePropagation()
如何在不在 DOM 中或在我的代码中重新发明浏览器的内置功能的情况下解决这个问题？
【问题讨论】：
【参考方案1】：您可能必须跟踪该值并将搜索框值设置为按下 esc 键时的最后一个值。
这样的事情可能会奏效......
<!DOCTYPE html>
<html>
<head></head>
<body>
<input type="search" id="searchInput" />
</body>
<script type="text/javascript">
let searcText = "";
const input = document.getElementById("searchInput");
input.onkeyup = (e) =>
if(e.keyCode === 27)
input.value = searchText;
return;
searchText = input.value;
</script>
</html>【讨论】：
我很欣赏你的回应，但我认为这是我想要避免的“怪物”方法之一。这在 React 中实现起来要复杂得多。 你最好编写自己的搜索组件或从 npm 获取一个，而不是试图绕过内置的浏览器行为以上是关于防止 ESC 从 Chrome 上的 <input type="search"> 清除文本（或添加按钮以清除文本而不使用 type="search"的主要内容，如果未能解决你的问题，请参考以下文章
防止iframe滚动捕获youtube iframe嵌入chrome
JQuery keyup 防止在 Chrome 中选择文本。怎么解决？