텍스트 선택 강조 표시를 비활성화하는 방법
질문
스택 오버 플로우 페이지 상단에있는 버튼 (예 : 질문, 태그, 사용자 등) 또는 탭이있는 앵커의 경우 사용자가 실수로 텍스트를 선택하면 강조 표시 효과를 비활성화하는 CSS 표준 방법이 있습니다.~을 자란
나는 이것이 JavaScript로 수행 될 수 있고 작은 Googling은 Mozilla-only -moz-user-select 옵션을 생성한다는 것을 알고 있습니다.
이를 CSS로 성취 할 수있는 표준 준수 방법이 있습니까? 그렇지 않은 경우 "모범 사례"접근법은 무엇입니까?
답변
2017 년 1 월 업데이트 :
사용할 수있는 방법에 따르면 사용자가 선택하는 것은 현재 Internet Explorer 9 및 이전 버전을 제외한 모든 브라우저에서 지원됩니다 (그러나 슬프게도 여전히 공급 업체 접두사가 필요함).
이들은 모두 사용 가능한 올바른 CSS 변형입니다.
.NOSELECT { -webkit-touch-callout : 없음;/ * ios safari * / -webkit-user-select : 없음;/ * 사파리 * / -khtml-user-select : 없음;/ * Konqueror HTML * / -moz-user-select : 없음;/ * 이전 버전의 Firefox * / -ms-user-select : 없음;/ * Internet Explorer / Edge * / 사용자 선택 : 없음;/ * 접두사가없는 버전, 현재 Chrome, Edge, Oper 및 Firefox가 지원 * / }
선택 가능한 텍스트.
비활성화 할 수없는 텍스트.
사용자 선택은 표준화 프로세스 (현재 W3C 작업 초안에서)입니다.모든 곳에서 일할 수 없으며 브라우저간에 구현시 차이가있을 수 있습니다.또한 브라우저는 향후에 지원을 삭제할 수 있습니다.
더 많은 정보는 Mozilla 개발자 네트워크 문서에서 찾을 수 있습니다.
이 속성의 값은 없음, 텍스트, 토글, 요소, 요소, 모두 및 상속입니다.
답변
대부분의 브라우저에서는 CSS 사용자 선택 속성의 독점적 인 변형을 사용하여 원래 제안한 다음 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의 경우 선택 불가능한 요소의 선택 불가능한 속성을 사용해야합니다.html의 속성을 사용 하여이 작업을 설정할 수 있습니다.
<div id="foo" unselectable="on" class="unselectable">...</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 이벤트 핸들러를 추가하여이를 피할 수 있음을 피할 수 있습니다.이벤트의.자세한 내용은 http://jsbin.com/yagekiji/1을 참조하십시오.
이것은 여전히 모든 가능성을 다루지 않습니다.선택 불가능한 요소에서 선택을 시작하는 것은 불가능하지만 일부 브라우저 (예를 들어, Internet Explorer 및 Firefox)에서 전체 문서를 선택할 수 없게하지 않고 비 선택 가능한 요소 뒤에 시작하기 전에 시작하는 선택을 방지하는 것이 불가능합니다.
답변
CSS 3의 사용자 선택 등록 정보가 가능해질 때까지 Gecko 기반 브라우저는 이미 발견 된 -moz-user-select 속성을 지원합니다.WebKit 및 Blink 기반 브라우저는 -webkit-user-select 속성을 지원합니다.
이것은 물론 Gecko 렌더링 엔진을 사용하지 않는 브라우저에서는 지원되지 않습니다.
"표준"은 신속하고 쉬운 방법을 준수하지 않습니다.JavaScript를 사용하면 옵션입니다.
실제 질문은 사용자가 특정 요소를 복사하고 붙여 넣을 수 없도록 사용자를 강조 표시 할 수 없도록하는 이유입니다.나는 사용자가 내 웹 사이트의 특정 부분을 강조시키지 않으려 고하는 한 번에 한 번에 오지 않았습니다.몇 시간을 보내고 코드를 보내고 코드를 보내고 코드를 보낸 후 몇 시간을 보내고 코드가있는 곳을 기억하거나 눈을 알 수 있도록 어디에서 알 수 있는지를 알 수있는 방법으로 하이라이트 기능을 사용합니다.
내가이 유일한 것을 볼 수있는 유일한 장소는 사용자가 웹 사이트를 복사하고 붙여 넣은 경우 복사 및 붙여 넣지 않아야하는 양식에 대한 단추가있는 경우입니다.
답변
Internet Explorer 용 JavaScript 솔루션은 다음과 같습니다.
onselectstart="return false;"
답변
요소를 제외한 모든 것에 대한 텍스트 선택을 사용하지 않으려면 CSS 에서이 작업을 수행 할 수 있습니다 (다른 브라우저에서는 다른 브라우저에서 허용되는 하위 요소에서 재정의 할 수없는 -moz-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 { 커서 : 기본값; -webkit-touch-callout : 없음; -webkit-user-select : 없음; -khtml-user-select : 없음; -moz-user-select : 없음; -ms-user-select : 없음; 사용자 선택 : 없음; }
선택 가능한 텍스트.
비활성화 할 수없는 텍스트.
이것은 데스크톱 응용 프로그램에있을 것처럼 텍스트를 완전히 평평하게 만듭니다.
출처:https://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting
최근댓글