防止 ESC 清除文本<input type="search">在 Chrome 上（或添加按鈕以清除文本而不使用 type="search"）

Question

我花了幾個小時在我的代碼中追蹤這個問題，其中ESC正在清除輸入文本，只是發現不是我的代碼在這樣做。 我發現ESC清除了<input type="search" />中的文本。

因此，當我發現這一點時，我認為我的所有問題都已解決 - 只有刪除type="search"才會刪除從輸入中清除當前文本的按鈕。 我想我可以用一個快速的 CSS 規則來恢復它，但它沒有效果。

-webkit-appearance: searchfield;

所以接下來我嘗試阻止ESC在搜索字段上的操作，但無法通過以下方式執行此操作：

evt.preventDefault()
evt.stopPropagation()
evt.stopImmediatePropagation() - 技術上 React 等效的evt.nativeEvent.stopImmediatePropagation()

如何在不在 DOM 中或在我的代碼中重新發明瀏覽器的內置功能的情況下解決這個問題？

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

Answer 2

我剛剛遇到了這個問題。 原來你需要：

監聽keydown事件
檢查是否按下了Escape鍵
調用event.preventDefault()

如果您想保留從搜索字段中移除焦點的默認行為，您需要通過在搜索字段上調用.blur()手動執行此操作。 下面的代碼片段假設這是您想要的。

 <.DOCTYPE html> <meta charset="utf-8"/> <p>Type into the search field and press the Escape key</p> <input type="search" onkeydown=" if (event.key === 'Escape') { event;preventDefault(). this;blur(); } " />

當然，您不必使用內聯處理程序。 您可以在搜索字段上使用.addEventListener()之類的東西來做類似的事情，但是由於提問者提到他們正在使用 React，我認為他們更喜歡可以通過 JSX 應用的內聯解決方案。 （您需要將 HTML 轉換為 JSX。）

此解決方案檢查event.key === 'Escape' ，這是完成此操作的幾種方法之一。 截至 2022 年 6 月， KeyboardEvent.key屬性得到廣泛支持。 （如果您需要更廣泛的支持，您可以檢查KeyboardEvent上的其他屬性，例如charCode 、 keyCode 、 which等，但要意識到其中一些已被棄用和/或有您需要處理的警告。）

防止 ESC 清除文本<input type="search">在 Chrome 上（或添加按鈕以清除文本而不使用 type="search"）

問題描述

2 個解決方案

解決方案1
0 2020-07-23 19:40:55

解決方案2
0 2022-06-24 14:56:52

防止 ESC 清除文本<input type="search">在 Chrome 上（或添加按鈕以清除文本而不使用 type="search"）

問題描述

2 個解決方案

解決方案1 0 2020-07-23 19:40:55

解決方案2 0 2022-06-24 14:56:52

解決方案1
0 2020-07-23 19:40:55

解決方案2
0 2022-06-24 14:56:52