如何取消頁面中選中的文字？

王铁柱6發表於2024-12-07

在前端開發中，取消頁面中選中的文字，主要有以下幾種方法：

  1. 使用 JavaScript 的 getSelection().removeAllRanges() 方法: 這是最常用的方法，它可以直接清除當前頁面的所有選中內容。

    window.getSelection().removeAllRanges();

  2. 點選頁面中的非文字區域: 這是使用者最直觀的取消選中方式。你可以透過監聽使用者的點選事件，並在點選發生在非文字區域時，呼叫 removeAllRanges() 方法。

    document.addEventListener('click', function(event) {
  if (!event.target.closest('p, span, a, h1, h2, h3, h4, h5, h6, pre, code, blockquote, li, dt, dd')) { // 根據你的實際情況調整選擇器
    window.getSelection().removeAllRanges();
  }
});

    這段程式碼監聽了 click 事件，並檢查點選的目標元素是否為文字相關的元素。如果不是，則清除選中狀態。你需要根據你的實際情況調整選擇器，確保它包含了你頁面中所有可能包含文字的元素。

  3. 設定 user-select: none CSS 樣式: 這個方法可以防止使用者選中特定元素內的文字。但這並不能清除已選中的文字，只是阻止使用者選擇。

    .no-select {
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

    在 HTML 中應用：

    <div class="no-select">
  這段文字無法被選中
</div>

  4. 聚焦到其他元素: 透過將焦點轉移到其他可聚焦的元素（例如輸入框），可以間接地取消文字選中。

    someInputElement.focus();

選擇哪種方法取決於你的具體需求:

  • 如果你需要在特定事件發生後清除選中狀態，例如點選按鈕或按下某個鍵，那麼使用 getSelection().removeAllRanges() 方法是最合適的。
  • 如果你需要防止使用者選中特定區域的文字，可以使用 user-select: none CSS 樣式。
  • 如果你需要在使用者點選頁面任何非文字區域時清除選中狀態，可以使用結合 click 事件監聽和 removeAllRanges() 方法的方式。

希望這些資訊能幫到你!

相關文章