No error , No gain

Question 1

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

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

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

Question 2

2017년 1월 업데이트:

Can I use 에 따르면, user-select 는 현재 Internet Explorer 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 개발자 네트워크 설명서 에서 찾을 수 있습니다.

이 속성의 값은 none , text , toggle , element , elements , all 및 inherit 입니다.

Question 3

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 할 요소의 unselectable 속성을 사용해야 합니다. 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"));

2014년 4월 30일 업데이트 : 이 트리 순회는 새 요소가 트리에 추가될 때마다 다시 실행되어야 하지만 @Han의 주석에서 대상에서 unselectable mousedown 이벤트 핸들러를 추가하여 이를 피할 수 있는 것으로 보입니다. 이벤트의. 자세한 내용은 http://jsbin.com/yagekiji/1 을 참조하십시오.

이것은 여전히 모든 가능성을 다루지는 않습니다. 선택할 수 없는 요소에서 선택을 시작하는 것은 불가능하지만 일부 브라우저(예: Internet Explorer 및 Firefox)에서는 전체 문서를 선택 불가능한 상태로 만들지 않고 선택 불가능한 요소의 앞과 뒤에 끝나는 선택을 방지하는 것이 여전히 불가능합니다.

Question 4

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

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

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

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

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

Question 5

Internet Explorer용 JavaScript 솔루션은 다음과 같습니다.

 onselectstart="return false;"

Question 6

당신이를 제외한 모든 사용 안 함 텍스트 선택하려면 <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; }

Question 7

이전 답변의 솔루션에서 선택이 중지되었지만 커서가 계속 변경되기 때문에 사용자는 여전히 텍스트를 선택할 수 있다고 생각합니다. 정적으로 유지하려면 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>

이렇게 하면 데스크톱 응용 프로그램에서와 같이 텍스트가 완전히 평평해집니다.

Question 8

Firefox 및 Safari에서 그렇게 할 수 있습니다(Chrome도?)

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

Question 9

WebKit에 대한 해결 방법:

 /* Disable tap highlighting */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

CardFlip 예제에서 찾았습니다.

Question 10

하이브리드 CSS + jQuery 솔루션이 마음에 듭니다.

<div class="draggable"></div> 안의 모든 요소를 선택 불가능하게 만들려면 다음 CSS를 사용하세요.

 .draggable { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-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; }

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

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

나는 여전히 모든 입력 요소가 상호 작용할 수 있기를 원하므로 :not() 의사 선택기를 원한다고 생각합니다. 신경 쓰지 않는다면 '*' 대신 사용할 수 있습니다.

주의 사항: Internet Explorer 9에는 이 추가 jQuery 조각이 필요하지 않을 수 있으므로 거기에 버전 확인을 추가할 수 있습니다.

Question 11

 .hidden:after { content: attr(data-txt); }

 <p class="hidden" data-txt="Some text you don't want to be selected"></p>

하지만 가장 좋은 방법은 아닙니다.

Question 12

이를 위해 CSS 또는 JavaScript 를 사용할 수 있습니다.

JavaScript 방식은 Internet Explorer의 이전 버전과 같은 이전 브라우저에서도 지원되지만 그렇지 않은 경우 CSS 방식을 사용하십시오.

HTML/자바스크립트:

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

Question 13

Internet Explorer의 경우 추가로 의사 클래스 focus (.ClassName:focus) 및 outline-style: none 을 추가해야 합니다.

 .ClassName, .ClassName:focus { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline-style: none; /* Internet Explorer */ }

Question 14

이 행을 CSS에 삽입하고 클래스 속성에서 "disHighlight"를 호출하십시오.

 .disHighlight { user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -o-user-select: none; -moz-user-select: none; }

Question 15

빠른 해킹 업데이트

모든 CSS user-select none 을 사용하는 경우 여전히 발생할 수 있는 문제가 있습니다.

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

CSS-Tricks가 말했듯이 문제 는 다음과 같습니다.

WebKit은 여전히 텍스트 주변의 요소를 선택하는 경우 텍스트 복사를 허용합니다.

또한 아래 항목을 사용하여 enforce 수 있습니다. 즉, 요소를 클릭하면 해당 요소에 래핑된 모든 텍스트가 선택됩니다. 이를 위해서는 값을 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 */ }

Question 16

SASS 사용 (SCSS 구문)

믹스인으로 이것을 할 수 있습니다:

 // Disable selection @mixin disable-selection { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } // No selectable element .no-selectable { @include disable-selection; }

HTML 태그에서:

 <div class="no-selectable">TRY TO HIGHLIGHT</div>

이 CodePen 에서 시도하십시오 .

당신이 사용하는 경우 autoprefixer를 다른 접두사를 제거 할 수 있습니다.

여기에서 브라우저 호환성 .

Question 17

터치 이벤트가 있는 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; }

Question 18

Less 및 Bootstrap 을 사용하는 경우 다음과 같이 작성할 수 있습니다.

 .user-select(none);

Question 19

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

Question 20

일하고있는

CSS:

 -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-user-select: none;

이것은 작동해야 하지만 이전 브라우저에서는 작동하지 않습니다. 브라우저 호환성 문제가 있습니다.

Question 21

Mozilla 전용 속성을 제외하고는 표준 CSS만으로 텍스트 선택을 비활성화할 수 있는 방법이 없습니다(현재로서는).

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

Question 22

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

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

다른 답변이 더 좋습니다. 이것은 아마도 최후의 수단/포획으로 보아야 합니다.

Question 23

다음과 같은 div 가 있다고 가정합니다.

 .second { cursor: default; user-select: none; -webkit-user-select: none; /* Chrome/Safari/Opera */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/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>

커서를 기본값으로 설정하여 사용자에게 선택할 수 없는 느낌을 줍니다.

모든 브라우저에서 지원하려면 접두사를 사용해야 합니다. 접두어가 없으면 모든 답변에서 작동하지 않을 수 있습니다.

Question 24

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

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

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

Question 25

텍스트 선택을 비활성화하려는 첫 번째 div에 다음을 추가합니다.

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

Question 26

노트:

텍스트를 선택할 수 없다는 점에서 정답이 맞습니다. 그러나 다음 두 스크린샷(2014년 11월 7일 기준)과 함께 보여 드리겠습니다.

무엇이든 선택하기 전에

우리가 선택한 후

숫자가 복사되었습니다.

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

테스트 대상: Ubuntu , Google Chrome 38.0.2125.111.

Question 27

::selection 과 user-select 모두 사용해야 한다는 것을 알았습니다.

 input.no-select:focus { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } input.no-select::selection { background: transparent; } input.no-select::-moz-selection { background: transparent; }

Question 28

다음과 같이 쉽게 수행할 수 있습니다.

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

또는:

<h1 id="example">Hello, World!</h1> 가 있다고 가정해 보겠습니다. h1 의 innerHTML 을 제거해야 합니다. 이 경우 Hello, World 입니다. 그런 다음 CSS로 이동하여 다음을 수행해야 합니다.

 #example::before // You can of course use **::after** as well. { content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here. display: block; // To make sure it works fine in every browser. }

이제 단순히 텍스트가 아니라 블록 요소라고 생각합니다.

Question 29

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

jQuery UI 비활성화 선택 :

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

Question 30

JavaScript 없이 내 솔루션을 확인하십시오.

jsFiddle

 li:hover { background-color: silver; } #id1:before { content: "File"; } #id2:before { content: "Edit"; } #id3:before { content: "View"; }

 <ul> <li><a id="id1" href="www.w1.com"></a> <li><a id="id2" href="www.w2.com"></a> <li><a id="id3" href="www.w3.com"></a> </ul>

내 기술이 적용된 팝업 메뉴: http://jsfiddle.net/y4Lac/2/

Question 31

이 유사 요소는 CSS 선택기 레벨 3의 초안에 있었지만, 특히 중첩 요소에서 동작이 과소 지정되고 상호 운용성이 달성되지 않았기 때문에 후보 권장 사항 단계에서 제거되었습니다.

::selection이 중첩된 요소에서 작동하는 방식에서 논의 중입니다.

브라우저에서 구현되고 있음에도 불구하고 탭 디자인(귀하의 경우)과 동일한 색상과 배경색을 선택하여 선택하면 텍스트가 선택되지 않는 것처럼 보일 수 있습니다.

일반 CSS 디자인

 p { color: white; background: black; }

선택 시

 p::-moz-selection { color: white; background: black; } p::selection { color: white; background: black; }

사용자가 텍스트를 선택하지 못하도록 하면 사용성 문제가 발생합니다.

if __name__ == "__main__": 하면 어떻게 되나요? (0)	2021.09.23
"px", "dip", "dp" 및 "sp"의 차이점은 무엇입니까? (0)	2021.09.23
양식 기반 웹 사이트 인증에 대한 최종 가이드 [닫은] (0)	2021.09.22
정렬된 배열을 처리하는 것이 정렬되지 않은 배열을 처리하는 것보다 빠른 이유는 무엇입니까? (0)	2021.09.22
스크립트 자체 내에서 Bash 스크립트의 소스 디렉토리를 어떻게 얻을 수 있습니까? (0)	2021.09.22

No error , No gain

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

SASS 사용 (SCSS 구문)

일반 CSS 디자인

선택 시

'etc. > StackOverFlow' 카테고리의 다른 글

'etc./StackOverFlow'의 다른글

티스토리툴바

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

SASS 사용 (SCSS 구문)

일반 CSS 디자인

선택 시

'etc. > StackOverFlow' 카테고리의 다른 글

'etc./StackOverFlow'의 다른글

관련글

티스토리툴바