如何透過點擊滑鼠選擇 DIV 中的所有文字？

透過滑鼠點擊在 DIV 中輕鬆選擇文字

在 DIV 元素中選擇文字對使用者來說應該是一個無縫的過程。本指南將示範透過點擊滑鼠來突出顯示整個文字的有效方法。

考慮以下 DIV：

<div>
<p>目標是使用戶能夠點擊 DIV 內的任意位置並突出顯示完整的 URL 文字。為了實現這一點，我們可以利用 JavaScript 的力量。 </p>
<h3 id="JavaScript-實作">JavaScript 實作</h3>
<p>這個解決方案的關鍵在於 selectText 函數：</p>
<pre class="brush:php;toolbar:false">function selectText(containerid) {
  if (document.selection) { // IE
    var range = document.body.createTextRange();
    range.moveToElementText(document.getElementById(containerid));
    range.select();
  } else if (window.getSelection) {
    var range = document.createRange();
    range.selectNode(document.getElementById(containerid));
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}

這個函數採用作為參數的 DIV 的 ID (containerid)。根據瀏覽器的不同，它可以使用 createTextRange 方法（對於 IE）或 createRange 方法來選擇 DIV 中的整個文字。

HTML 整合

要套用此功能，請包含以下內容HTML 中的程式碼片段：

<div>
<p>透過將onclick 事件偵聽器指派給DIV，在單擊任何位置時都會調用selectText 函數</p>
<p>透過此實現，用戶只需單擊即可輕鬆突出顯示DIV 元素中的整個文本，從而增強使用者體驗並使文字選擇變得輕而易舉。 </p>
</div>