HTML UI에서 텍스트 선택을 비활성화하려면 어떻게 해야 합니까?

향상된 UI 경험을 위해 텍스트 선택 비활성화

HTML 사용자 인터페이스를 디자인할 때 탭 이름과 같은 일부 텍스트 요소를 선택하면 바람직하지 않게 보일 수 있습니다. . 이를 방지하려면 다음 방법 중 하나를 구현하는 것이 좋습니다.

CSS 솔루션

대부분의 브라우저에서 다음 CSS 스타일을 사용하면 텍스트를 선택하지 못할 수 있습니다.

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

IE 및 HTML 속성 Opera

IE(버전 10 이하) 및 Opera와 같은 브라우저의 경우 선택 불가능 속성을 사용하세요.

<div>
<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"));