텍스트 읽기/비 선택 가능

Question

인라인 CSS를 사용하여 일부 텍스트를 읽기 전용으로 만들려고합니다. 이 두 가지 방법 모두 표준 HTML 페이지를 사용하여 테스트 할 때 잘 작동합니다.

파이어 폭스 구문 :

<div style="-moz-user-select: none;">Some text</div> 

크롬 구문 : 그러나

<div style="-webkit-user-select: none;">Some text</div> 

, 나는 CMS 제품에서 사용되는 텍스트 편집기에서이 구문을 사용하려합니다. 파이어 폭스는 괜찮지만 크롬은 제대로 작동하지 않습니다. 나는 또한 또한 작동하지 않는 가장 기본적인 방법 사용하여 시도했다 :

<div style="user-select: none;">Some text</div> 

내 질문은을, 텍스트 블록을 사용하지 인라인 CSS (또는 HTML)를 사용하는 다른 방법이있다. 자유 텍스트 편집기를 사용하기 때문에 모든 HTML 입력 유형을 사용할 수 없습니다.

Answer 1

하나는 다음과 같은 세 가지 인라인 CSS를 결합 할 수 있습니다 : 그것은 당신이 언급 한 모든 브라우저에서 작동해야

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;">Some text</div> 

이 방법.

-webkit-터치 콜 아웃 : 하나는 How to disable text selection highlighting using CSS?에서 인용 설명으로 링크 된 포스트 에 제안 하나 개의 클래스에이 CSS를 포장 할 수 없음을;/* iOS Safari /
-webkit-user-select : none;/ 크롬/사파리/오페라 /
-khtml-user-select : none;/ Konqueror /
-moz-user-select : none;/ Firefox /
-ms-user-select : none;/ Internet Explorer/Edge /
user-select : none;/ 비 접두사 버전, 현재 은 모든 브라우저에서 지원되지 않는 */

하나도 선택을 방지하기 위해 일부 자바 스크립트 속성을 사용할 수 있습니다

<div style="-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;" unselectable="on" onselectstart="return false;" onmousedown="return false;">Some text</div>