CSS를 사용하여 텍스트를 선택하고 복사하는 것을 방지하는 방법은 무엇입니까? (코드 예)

프런트 엔드 개발에서는 때때로 다음과 같은 상황이 있을 수 있습니다. 텍스트를 두 번 클릭하면 텍스트가 선택됩니다. 이는 매우 추악하고 전혀 아름답지 않으며 매우 불편하며 때로는 그냥 사용해야 합니다. 일부 웹 모듈 텍스트를 선택하거나 복사할 수 없습니다.

그러면 이 요구 사항을 실현하고 텍스트가 선택되거나 복사되는 것을 방지하는 방법은 무엇입니까? 이 글에서는 텍스트가 선택되어 복사되는 것을 방지하는 CSS 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS에서 텍스트 선택 및 복사를 방지하는 방법은 실제로 사용자 선택 속성을 사용하여 완료할 수 있습니다. 이 부동산을 살펴보겠습니다.

사용자 선택 속성은 CSS3의 새로운 속성으로, 콘텐츠의 선택 가능성을 제어하고, 사용자가 텍스트를 선택할 수 있는지 여부를 설정하거나 검색하는 데 사용할 수 있으며, 대체 요소를 제외한 모든 요소에 적용됩니다.

기본 구문:

user-select:value;

다음 속성 값을 설정할 수 있습니다.

auto: 기본값, 텍스트는 브라우저의 기본 속성에 따라 선택됩니다.

none: 설정할 수 있습니다.

text: 사용자가 요소의 텍스트를 선택할 수 있도록 설정합니다.

element: 텍스트를 선택 사항으로 설정하지만 선택 범위는 다음과 같습니다. 요소 경계에 의해 제한됨(이 속성 값은 IE 및 FF에서만 지원됨)

all: 모든 콘텐츠를 전체적으로 선택할 때 선택할 수 있습니다. 하위 요소에서 두 번 클릭 또는 상황별 클릭이 발생하면 해당 하위 요소로 돌아가는 가장 높은 상위 요소가 선택됩니다. 간단히 말하면, 대상 요소는 부분이 아닌 전체로 선택됩니다. 브라우저는 자동으로 전체 요소의 콘텐츠를 선택합니다.

-moz-none: Firefox 개인 속성 값, 요소 및 하위 요소의 텍스트 설정은 선택 사항이 아니지만 텍스트를 통해 하위 요소를 선택 사항으로 재설정할 수 있습니다.

브라우저 지원

위 그림은 user-select 속성 값이 none|text|all일 때 각 브라우저의 지원 수준을 나타냅니다. 속성 값이 element일 때 대부분의 브라우저는 지원하지 않습니다. 그래서 나열되지 않습니다.

아래에서는 호환성을 고려하여 텍스트 선택 및 복사를 금지하는 방법을 구현하기 위해 css 사용자 선택 속성을 도입하는 간단한 코드 예제를 사용합니다.

텍스트 선택 금지 코드 복사 예:

css 코드:

.box{   
 -webkit-user-select: none;   
  -moz-user-select: none;    
  -ms-user-select: none;    
  user-select: none;
}

html 코드:

<div class="box" onselectstart="return false;" unselectable="on">
    这是测试文字，选择试试，你会发现怎么也选不中，无法复制，哈哈哈哈！
</div>

설명:

IE6-9는 사용자 선택 속성을 지원하지 않기 때문에 user-select:none을 구현하려면 onselectstart="return false;"라는 레이블 속성을 사용하여 텍스트 선택 및 복사를 금지하는 효과를 동시에 달성할 수 있으며 Safari와 Chrome도 이 레이블 속성을 지원합니다. .

요약: 위는 텍스트 선택 및 복사를 금지하기 위해 이 문서에서 소개한 CSS 구현의 전체 내용입니다. 사용자 선택 속성에 대한 이해를 깊게 하기 위해 직접 시도해 볼 수 있습니다. 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 관련 튜토리얼을 보려면 CSS 비디오 튜토리얼 , HTML 비디오 튜토리얼 , bootstrap 비디오 튜토리얼 을 방문하세요.

위 내용은 CSS를 사용하여 텍스트를 선택하고 복사하는 것을 방지하는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!