CSS 텍스트 선택 비활성화
현재 텍스트 선택을 비활성화하기 위해 본문 태그에 넣었습니다.
body {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
그러나 이제 내 input및 textarea상자를 선택할 수 없습니다. 이러한 입력 요소 만 선택 가능하고 나머지는 선택 불가능하게 만들 수있는 방법은 무엇입니까?
이러한 속성을 전신에 적용하지 마십시오. 클래스로 이동하고 해당 클래스를 비활성화하려는 요소에 적용하십시오.
.disable-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
모든 요소에서 사용자 선택을 비활성화 할 수도 있습니다.
* {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
그리고 사용자가 선택할 수 있도록하려는 요소에서 활성화하는 것보다 :
input, textarea /*.contenteditable?*/ {
-webkit-touch-callout:default;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}
모든 것을 요약하고 싶었습니다.
.unselectable {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<div class="unselectable" unselectable="yes" onselectstart="return false;"/>
::selection,::moz-selection {color:currentColor;background:transparent}
모든 선택을 비활성화 할 수 있습니다.
.disable-all{-webkit-touch-callout: none; -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
이제 입력 및 텍스트 영역 활성화를 활성화 할 수 있습니다.
input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}
*이를 위해 와일드 카드 선택기 를 사용하십시오 .
#div * { /* Narrowing, to specific elements, like input, textarea is PREFFERED */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
이제 id div가 있는 div 내의 모든 요소 에는 선택 항목이 없습니다.
데모
body원하는 요소 목록 을 입력하는 대신 .
I agree with Someth Victory, you need to add a specific class to some elements you want to be unselectable.
Also, you may add this class in specific cases using javascript. Example here Making content unselectable with help of CSS.
Disable selection everywhere
input, textarea ,*[contenteditable=true] {
-webkit-touch-callout:default;
-webkit-user-select:text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;
}
IE7
<BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
참고URL : https://stackoverflow.com/questions/10809995/css-disable-text-selection
'IT박스' 카테고리의 다른 글
| 전체 파일의 압축을 풀지 않고 zip 파일에서 데이터를 읽는 방법 (0) | 2020.09.05 |
|---|---|
| Jquery는 $ jquery.data ()가있는 모든 요소를 선택합니다. (0) | 2020.09.05 |
| NameError (초기화되지 않은 상수 Paperclip :: Storage :: S3 :: AWS) : (0) | 2020.09.05 |
| 금요일에 배치하지 않는 이유는 무엇입니까? (0) | 2020.09.05 |
| 라텍스는 목록의 항목 사이에 공백을 제거합니다. (0) | 2020.09.05 |