>  기사  >  웹 프론트엔드  >  CSS 규칙을 통해 선택한 텍스트를 비활성화하는 코드 예

CSS 규칙을 통해 선택한 텍스트를 비활성화하는 코드 예

黄舟
黄舟원래의
2017-04-18 09:44:171607검색

다른 사람이 귀하의 기사를 복사하는 것을 원하지 않는 경우와 같은 일부 시나리오에서는 텍스트 선택을 비활성화해야 합니다. 이때 CSS+JS를 사용하여 이 문제를 해결할 수 있습니다. 또한 여기서는 user-select가 아직 공식 W3C 표준이 아니며 각 브라우저가 개인 속성 형식으로 지원을 제공한다는 점을 지적해야 합니다.

구문

Formal syntax: none | text | all | element

코드는 다음과 같습니다.

(-prefix-)user-select: none;
(-prefix-)user-select: text;
(-prefix-)user-select: all;
(-prefix-)user-select: element;

코드는 다음과 같습니다.

.row-of-icons {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */</p> <p> /* No support for these yet,use at own risk */
-o-user-select: none;
user-select: none;
}

IE 호환성

현재 -ms-user-select 규칙은 IE 10 이상의 브라우저에서 사용할 수 있지만, 이전 버전의 IE에서는 javascript를 통해서만 선택한 텍스트를 금지할 수 있습니다.

코드는 다음과 같습니다.

$(el).attr(&#39;unselectable&#39;,&#39;on&#39;)
.css({&#39;-moz-user-select&#39;:&#39;-moz-none&#39;,
&#39;-moz-user-select&#39;:&#39;none&#39;,
&#39;-o-user-select&#39;:&#39;none&#39;,
&#39;-khtml-user-select&#39;:&#39;none&#39;, /* you could also put this in a class */
&#39;-webkit-user-select&#39;:&#39;none&#39;,/* and add the CSS class here instead */
&#39;-ms-user-select&#39;:&#39;none&#39;,
&#39;user-select&#39;:&#39;none&#39;
}).bind(&#39;selectstart&#39;, function(){
return false;
});


위 내용은 CSS 규칙을 통해 선택한 텍스트를 비활성화하는 코드 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.