css - 자바 - 텍스트 선택 강조 표시를 비활성화하는 방법은 무엇입니까?




자바 스크립트 disabled 속성 (20)

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

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

빠르고 쉽게 표준을 준수하는 표준은 없습니다. JavaScript 사용은 옵션입니다.

진짜 질문은 사용자가 특정 요소를 강조 표시하고 아마도 복사하여 붙여 넣을 수 없도록하려는 이유는 무엇입니까? 나는 사용자가 내 웹 사이트의 특정 부분을 강조 표시하지 못하도록 한 번에 건너 오지 않았습니다. 몇 시간을 읽고 읽고 쓰는 데 많은 시간을 보낸 후에 친구들 중 몇 명이 하이라이트 기능을 사용하여 페이지의 어느 부분에 있었는지 기억하거나 마커를 제공하여 눈이 다음에 어디를보아야하는지 알 수 있습니다.

이 기능이 유용하다는 것을 알 수있는 유일한 곳은 사용자가 웹 사이트를 복사하여 붙여 넣으면 복사해서 붙여 넣으면 안되는 양식 버튼이있는 경우입니다.

버튼처럼 작동하는 앵커 (예 : 스택 오버플로 페이지 맨 위에있는 질문 , 태그 , 사용자 등) 또는 탭의 경우 사용자가 실수로 텍스트를 선택하면 강조 효과를 사용하지 않도록 설정하는 CSS 표준 방법이 있습니까?

JavaScript로이 작업을 수행 할 수 있다는 것을 알고 있으며 Mozilla 전용 -moz-user-select 옵션을 사용합니다.

CSS를 사용하여 표준을 준수하는 방법이 있습니까? 그렇다면 "우수 사례"접근 방식은 무엇입니까?


Firefox와 Safari (Chrome도 가능)에서 그렇게 할 수 있습니다.

::selection { background: transparent; }
::-moz-selection { background: transparent; }

나는 CSS-Tricks 웹 사이트에서 배웠다.

user-select: none;

그리고 이것은 또한 :

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

나는 하이브리드 CSS + jQuery 솔루션을 좋아한다.

<div class="draggable"></div> 안에있는 모든 요소를 ​​선택 취소 할 수있게하려면 다음 CSS를 사용하십시오.

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }

그런 다음 jQuery를 사용하는 경우 $(document).ready() 블록 안에 추가하십시오.

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

나는 아직도 당신이 어떤 입력 요소가 상호 작용할 수 있기를 원한다는 것을 알기 때문에, :not() 의사 선택자이다. 상관 없으면 대신 '*' 를 사용할 수 있습니다.

주의 사항 : IE9에서는이 추가 jQuery 조각이 필요하지 않을 수 있으므로 버전 체크를 추가 할 수 있습니다.


당신은 CSSJavaScript 를 사용할 수 있습니다. JavaScript 방식은 구식 IE와 같은 구형 브라우저에서도 지원되지만, 그렇지 않은 경우에는 CSS 방식을 사용하십시오.

HTML / JavaScript :

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS :

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>


대부분의 브라우저에서 CSS user-select 속성에 대한 독점적 인 변형을 사용하여이를 달성 할 수 있습니다. 원래 CSS3 에서 제안되었지만 이제는 CSS UI 레벨 4 에서 제안되었습니다.

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

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

IE <10 및 Opera <15의 경우 unselectable 할 요소의 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의 설명에 따르면 unselectable 할 수없는 mousedown 이벤트 처리기를 추가하여이를 피할 수 있습니다. 이벤트의 타겟. 자세한 내용은 http://jsbin.com/yagekiji/1 을 참조하십시오.

이것은 여전히 ​​모든 가능성을 다루지는 않습니다. 선택할 수없는 요소에서 선택을 시작할 수는 없지만 일부 브라우저 (예 : IE 및 Firefox)에서는 전체 문서를 선택 취소 할 수 없으면 선택 취소 할 수있는 요소 앞뒤로 시작하는 선택을 방지하는 것이 여전히 불가능합니다.


모질라 전용 속성과는 별도로 표준 CSS로 텍스트 선택을 비활성화 할 방법이 없습니다 (현재).

는 탐색 버튼에 대한 텍스트 선택을 비활성화하지 않으며, 일반적인 선택 동작을 수정하고 사용자의 기대와 충돌하기 때문에 대부분의 경우 그렇게하지 않는 것이 좋습니다.


색상 선택이 필요하지 않은 경우 유용합니다.

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... 모든 다른 브라우저 수정. Internet Explorer 9 이상에서 작동합니다.


이 기능은 일부 브라우저에서 작동합니다.

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

셀렉터 앞에 원하는 요소 / ID를 공백없이 쉼표로 구분하여 추가하면됩니다.

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

다른 대답은 더 좋습니다. 이것은 아마도 마지막 수단 / 캐치 올로 간주되어야합니다.


이 두 div가 있다고 가정 해 보겠습니다.

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}
<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

커서를 기본값으로 설정하여 사용자 / 사용자에게 선택하기 힘든 느낌을줍니다.

접두어를 붙이지 않고 모든 브라우저에서 지원하려면 접두사를 사용해야합니다. 모든 대답에서 작동하지 않을 수도 있습니다.


이것은 CSS가 아니지만 언급 할만한 가치가 있습니다.

jQuery UI 선택 해제 :

$("your.selector").disableSelection();

이것을 사용해보십시오 :

::selection {
    background: transparent;
}

그리고 특정 요소 내부를 선택하지 않도록 지정하려면 다음과 같이 선택 규칙 앞에 요소 클래스 또는 ID를 넣으면됩니다.

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}

터치 이벤트가있는 Android 브라우저에서 동일한 문제를 겪고있는 사용자는 다음을 사용하십시오.

html,body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

텍스트 선택을 사용하지 않으려는 첫 번째 div에 다음을 추가하십시오.

onmousedown='return false;' 
onselectstart='return false;'

LessBootstrap 을 사용한다면 다음과 같이 쓸 수 있습니다 :

.user-select(none);

<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;
}

노트:

정답은 텍스트를 선택할 수 없기 때문입니다. 그러나 2014 년 11 월 7 일부터 다음 두 장의 스크린 샷을 통해 보여 드리 겠지만 텍스트를 복사 할 수는 있습니다.

보시다시피 숫자를 선택할 수 없지만 복사 할 수있었습니다.

테스트 대상 : Ubuntu , Chrome 38.0.2125.111.


빠른 해킹 업데이트 : 2017 년 3 월 - CSS-Tricks

아래에 표시된 것처럼 모든 CSS 사용자 선택 속성에 'none'값을 넣으면이 문제가 여전히 발생할 수 있습니다.

.div{
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none;   /* Firefox all */
  -ms-user-select: none;  /* IE 10+ */
   user-select: none;  /* Likely future */ 
}

CSS-Tricks 따르면 문제는

  • 웹킷을 사용하면 주위의 요소를 선택하면 텍스트를 복사 할 수 있습니다.

따라서 아래의 방법을 사용하여 문제에 대한 해결책 인 전체 요소가 선택되도록 할 수 있습니다. 'none'값을 'all'으로 변경하면됩니다.이 값은 다음과 같습니다.

.force-select {  
  -webkit-user-select: all;  /* Chrome 49+ */
  -moz-user-select: all;     /* Firefox 43+ */
  -ms-user-select: all;      /* No support yet */
  user-select: all;          /* Likely future */   
}

.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

그것은 최선의 방법은 아니지만.


-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
-webkit-user-select:none;
-moz-user-select:none;
onselectstart="return false;"
::selection { background: transparent; }
::-moz-selection { background: transparent; }

* {
-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;
}
<div class="draggable"></div>
.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input { 
    -webkit-user-select: text; 
    -khtml-user-select: text; 
    -moz-user-select: text; 
    -o-user-select: text; 
    user-select: text; 
 }
if ($.browser.msie) $('.draggable').find(':not(input)').attr('unselectable', 'on');




textselection