css 텍스트 선택 강조 표시를 비활성화하는 방법

버튼(예: 스택 오버플로 페이지 상단에 있는 질문 , 태그 , 사용자 등) 또는 탭처럼 작동하는 앵커의 경우 사용자가 실수로 텍스트를 선택하는 경우 강조 표시 효과를 비활성화하는 CSS 표준 방법이 있습니까? ?

나는 이것이 JavaScript로 할 수 있고 약간의 인터넷 검색으로 Mozilla 전용 -moz-user-select옵션을 얻을 수 있다는 것을 알고 있습니다.

CSS를 사용하여 이를 수행하는 표준 호환 방법이 있습니까? 그렇지 않은 경우 "모범 사례" 접근 방식은 무엇입니까?

 

 

대부분의 브라우저에서 이것은 CSS user-select속성 에 대한 독점 변형을 사용하여 달성할 수 있습니다. 원래 제안되었다가 CSS 3에서 포기되었으며 현재 CSS UI 레벨 4 에서 제안됩니다 .

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

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Internet Explorer < 10 및 Operaunselectable < 15 의 경우 선택을 취소할 요소 의 속성을 사용해야 합니다 . HTML의 속성을 사용하여 이것을 설정할 수 있습니다.

<div id="foo" unselectable="on" class="unselectable">...</div>

슬프게도 이 속성은 상속되지 않습니다. 즉, 내부에 있는 모든 요소의 시작 태그에 속성을 넣어야 합니다 <div>. 이것이 문제라면 대신 JavaScript를 사용하여 요소의 자손에 대해 재귀적으로 이 작업을 수행할 수 있습니다.

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

 

 

CSS 3의 user-select 속성을 사용할 수 있을 때까지 Gecko 기반 브라우저는 -moz-user-select이미 찾은 속성을 지원합니다. WebKit 및 Blink 기반 브라우저는 -webkit-user-select속성을 지원합니다.

물론 이것은 Gecko 렌더링 엔진을 사용하지 않는 브라우저에서는 지원되지 않습니다.

"표준"을 준수하는 빠르고 쉬운 방법은 없습니다. JavaScript를 사용하는 것은 옵션입니다.

진짜 질문은 왜 사용자가 특정 요소를 강조 표시하고 복사하여 붙여넣을 수 없도록 하려는 것입니까? 사용자가 내 웹사이트의 특정 부분을 강조 표시하지 못하도록 하고 싶었던 적은 단 한 번도 없었습니다. 내 친구 중 몇몇은 코드를 읽고 작성하는 데 많은 시간을 보낸 후 하이라이트 기능을 사용하여 페이지의 어디에 있었는지 기억하거나 눈이 다음에 볼 위치를 알 수 있도록 마커를 제공합니다.

이것이 유용하다고 볼 수 있는 유일한 곳은 사용자가 웹사이트를 복사하여 붙여넣은 경우 복사하여 붙여넣으면 안 되는 양식에 대한 버튼이 있는 경우입니다.