내 HTML 페이지에서 텍스트 선택을 방지하려면 어떻게 해야 합니까?

HTML 페이지에서 텍스트 선택 취소: 종합 가이드

사용자 경험 영역에서는 HTML 페이지에서 텍스트 선택을 방지하는 것이 바람직할 수 있습니다. HTML 페이지 내의 특정 요소. 이는 강조 표시되면 매력적이지 않게 보일 수 있는 탭 이름과 같은 요소와 특히 관련이 있습니다.

CSS 솔루션

다행히도 대부분의 최신 브라우저는 CSS 기반 솔루션을 제공합니다.

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

  /* IE 10+ */
  -ms-user-select: none;
  user-select: none;
}

이 코드를 스타일시트에 추가하기만 하면 지정된 요소가 unselectable.

IE 및 Opera Alternative

Internet Explorer 및 Opera의 이전 버전에서는 unselectable 속성을 사용할 수 있습니다.

<div>
<p>그러나 , 이 속성은 상속되지 않으므로 각 하위 항목에 대해 명시적으로 설정해야 할 수도 있습니다. element.</p>
<p><strong>재귀 JavaScript 솔루션</strong></p>
<p>상속 문제가 발생하는 경우 JavaScript를 사용하여 선택 불가능한 속성을 재귀적으로 적용할 수 있습니다.</p>
<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"));