如何防止 DIV 元素內的文字選擇？

防止 DIV 元素中的文字選擇

在某些情況下，確保 DIV 元素中的特定文字仍然無法被使用者選擇變得至關重要。例如，您可能會遇到這樣的情況：覆蓋文字區域的大的半透明文字用作水印。雖然美觀可能令人愉悅，但無意中選擇此文本可能會造成障礙。

Z 索引無效

最初，人們可能會認為操縱 z 索引財產將解決這個問題。透過為水印文字分配較低的 z-index 值，理論上它會呈現在較高 z-index 文字區域的下方。但是，瀏覽器在確定文字可選擇性時會忽略 z-index 圖層。

CSS 解決方案

為了實現所需的行為，CSS 提供了一個簡單的解決方案：

.watermark {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

這段綜合程式碼適用於多種瀏覽器，有效地停用DIV元素中的文字選擇「浮水印。」

jQuery 擴充

或者，如果您喜歡基於jQuery 的方法，請考慮使用以下擴充功能：

$('.watermark').disableSelection();

此擴充功能明確阻止在指定的DIV 元素中進行選擇。

實作這些方法中的任何一個都將確保水印文字保持不可選擇，增強使用者體驗並防止不必要的文字修改。

以上是如何防止 DIV 元素內的文字選擇？的詳細內容。更多資訊請關注PHP中文網其他相關文章！