為什麼 Chrome 在獲得焦點時會保留佔位符文本，如何修復它？

使用CSS 和jQuery 克服Chrome 的自動對焦佔位符故障

在HTML 中處理佔位符文字時，通常會遇到這樣的問題：即使輸入欄位獲得焦點，佔位符文字仍然可見。 Firefox、Safari 和 Edge 等瀏覽器可以優雅地處理此問題並自動隱藏佔位符文字。然而，Chrome 經常無法做到這一點。

為了解決 Chrome 的這個特定問題，我們可以利用 CSS 或 jQuery。使用以下 CSS 規則，您可以在輸入欄位獲得焦點時使佔位符文字透明：

input:focus::placeholder {
  color: transparent;
}

此 CSS 聲明專門針對輸入欄位獲得焦點時的佔位符文字。透過將顏色設為透明，佔位符文字實際上變得不可見。

如果您喜歡jQuery 解決方案，可以使用以下程式碼：

$(function() {
  $("input[placeholder]").focus(function() {
    $(this).attr("placeholder", "");
  });

  $("input[placeholder]").blur(function() {
    $(this).attr("placeholder", $(this).attr("data-placeholder"));
  });
});

在此jQuery 程式碼中，我們監聽用於具有佔位符屬性的輸入元素上的焦點事件和模糊事件。獲得焦點後，我們清除佔位符屬性，這會隱藏佔位符文字。當焦點遺失時，我們透過將 placeholder 屬性設定為儲存在 data-placeholder 屬性中的值來恢復佔位符文本，該值是我們在初始化時設定的。

CSS 和 jQuery 解決方案都可以有效地自動隱藏佔位符文字在 Chrome 中，當輸入欄位獲得焦點時，確保在所有瀏覽器上獲得一致且使用者友好的體驗。

以上是為什麼 Chrome 在獲得焦點時會保留佔位符文本，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！