如何使用 CSS 和 JavaScript 停用 HTML 元素上的文字選擇？

停用 HTML 頁面上的文字選擇：探索 CSS 和 JavaScript 解決方案

在 Web 開發領域，為使用者提供無縫導航體驗至關重要。然而，有時預設的瀏覽器行為可能會阻礙這一目標。其中一個障礙是用戶雙擊時自動選擇文本，特別是選項卡名稱等元素。為了解決這個問題，開發人員經常尋找禁用文字選擇的方法。

CSS 解決方案：不可選擇文字的樣式

在各種瀏覽器中，CSS 提供了禁用文字選擇的全面解決方案。透過將特定的樣式規則套用至所需的元素，開發人員可以阻止預設的突出顯示行為。以下CSS 程式碼範例可實現此效果：

*.unselectable {
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

HTML 屬性：不可選取的元素

對於Internet Explorer 10 之前的版本和Opera 等瀏覽器，HTML 屬性提供了另一種方法。透過將不可選擇屬性設為“on”，開發人員可以將特定元素指定為不可選擇。

<div>
<p>但是，需要注意的是，該屬性不是繼承的，因此需要將其應用到容器內的每個單獨元素</p>
<div>.要為後代自動化此過程，可以使用JavaScript： <pre class="brush:php;toolbar:false">function makeUnselectable(node) {
  if (node.nodeType == 1) {
    node.setAttribute("unselectable", "on");
  }
  var child = node.firstChild;
  while (child) {
    makeUnselectable(child);
    child = child.nextSibling;
  }
}

makeUnselectable(document.getElementById("foo"));

透過利用這些CSS 和HTML/JavaScript 技術，開發人員可以有效地停用HTML 頁面中特定元素的文字選擇，從而增強使用者體驗並保持視覺上有凝聚力的設計。