한 번의 마우스 클릭으로 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 함수가 호출됩니다. DIV 내의 아무 곳이나 클릭하면 원하는 텍스트가 선택됩니다.</p>
<p>이 구현을 통해 사용자는 한 번의 클릭으로 DIV 요소 내의 전체 텍스트를 쉽게 강조 표시할 수 있으므로 사용자 경험이 향상되고 텍스트 선택이 쉬워집니다. </p>
</div>