스택 오버플로 페이지 맨 위에있는 단추 (예 : 질문 , 태그 , 사용자 등) 또는 탭 처럼 작동하는 앵커 또는 사용자가 실수로 텍스트를 선택한 경우 강조 효과를 비활성화하는 CSS 표준 방법이 있습니까?
JavaScript 로이 작업을 수행 할 수 있으며 약간의 인터넷 검색으로 Mozilla 전용 -moz-user-select
옵션이 생성되었습니다.
CSS를 사용하여 표준을 준수하는 방법이 있습니까? 그렇지 않은 경우 “모범 사례”접근 방식은 무엇입니까?
답변
2017 년 1 월 업데이트 :
에 따르면 캔 I 사용 의는 user-select
현재 인터넷 익스플로러 9 이전 버전 (그러나 슬프게도를 제외한 모든 브라우저에서 지원됩니다 여전히 공급 업체 접두사를 필요).
올바른 CSS 변형은 모두 다음과 같습니다.
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
<p>
Selectable text.
</p>
<p class="noselect">
Unselectable text.
</p>
주 user-select
(현재의 표준화 과정에 W3C의 작업 초안 ). 모든 곳에서 작동한다고 보장 할 수는 없으며 브라우저마다 구현에 차이가있을 수 있으며 향후 브라우저에서 지원을 중단 할 수 있습니다.
자세한 내용은 Mozilla Developer Network 설명서를 참조하십시오 .
답변
대부분의 브라우저에서 이것은 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 및 Opera <15 unselectable
의 경우 선택할 수없는 요소 의 속성 을 사용해야합니다 . HTML의 속성을 사용하여이를 설정할 수 있습니다.
<div id="foo" unselectable="on" class="unselectable">...</div>
안타깝게도이 속성은 상속되지 않습니다. 즉, 안에있는 모든 요소의 시작 태그에 속성을 넣어야합니다 <div>
. 이것이 문제라면, 대신 자바 스크립트를 사용하여 요소의 자손에 대해 재귀 적으로이를 수행 할 수 있습니다.
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"));
2014년 4월 30일 업데이트 : 새로운 요소가 트리에 추가 될 때마다 다시 실행을 할이 트리 탐색 요구를하지만, 추가하여이를 방지 할 수 있음을 @Han에 의해 코멘트에서 보이는 mousedown
이벤트 핸들러를 그 집합 unselectable
의 대상에 행사. 자세한 내용은 http://jsbin.com/yagekiji/1 을 참조하십시오.
이것은 여전히 모든 가능성을 다루지는 않습니다. 선택 불가능한 요소에서 선택을 시작하는 것은 불가능하지만 일부 브라우저 (예 : Internet Explorer 및 Firefox)에서는 전체 문서를 선택 불가능하게하지 않고 선택 불가능한 요소 이전에 시작하여 끝나는 선택을 막을 수 없습니다.
답변
Internet Explorer 용 JavaScript 솔루션은 다음과 같습니다.
onselectstart="return false;"
답변
CSS 3의 사용자 선택 속성을 사용할 수 있을 때까지 Gecko 기반 브라우저는 -moz-user-select
이미 찾은 속성을 지원합니다 . WebKit 및 Blink 기반 브라우저는-webkit-user-select
특성을 .
물론 Gecko 렌더링 엔진을 사용하지 않는 브라우저에서는 지원되지 않습니다.
“표준”을 준수하는 빠르고 쉬운 방법은 없습니다. JavaScript를 사용하는 것이 옵션입니다.
실제 질문은 왜 사용자가 특정 요소를 강조 표시하고 아마도 복사하여 붙여 넣을 수 없도록 하시겠습니까? 사용자가 내 웹 사이트의 특정 부분을 강조 표시하지 못하도록 한 번도 오지 않았습니다. 내 친구들 중 일부는 코드를 읽고 쓰는 데 많은 시간을 보낸 후 강조 표시 기능을 사용하여 페이지의 위치를 기억하거나 마커를 제공하여 눈이 다음에 볼 위치를 알 수 있도록합니다.
이것이 유용하다는 것을 알 수있는 유일한 장소는 사용자가 웹 사이트를 복사하여 붙여 넣을 때 복사하여 붙여 넣을 수없는 양식의 단추가있는 경우입니다.
답변
<p>
요소를 제외한 모든 항목에서 텍스트 선택을 비활성화 하려면 CSS 에서이 작업을 수행 할 수 있습니다 ( -moz-none
하위 요소에서 재정의를 허용하는 하위 요소를 살펴보십시오 none
.
* {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-o-user-select: none;
user-select: none;
}
p {
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-o-user-select: text;
user-select: text;
}
답변
이전 답변의 솔루션에서 선택이 중지되었지만 커서가 여전히 변경되어 사용자는 여전히 텍스트를 선택할 수 있다고 생각합니다. 정적으로 유지하려면 CSS 커서를 설정해야합니다.
.noselect {
cursor: default;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<p>
Selectable text.
</p>
<p class="noselect">
Unselectable text.
</p>
그러면 데스크톱 응용 프로그램에서와 같이 텍스트가 완전히 평평 해집니다.
답변
Firefox와 Safari에서도 가능합니다 (Chrome도?)
::selection { background: transparent; }
::-moz-selection { background: transparent; }