HTML에서 텍스트 선택을 취소하는 방법

HTML에서는 user-select 속성을 사용하여 텍스트 선택을 취소할 수 있습니다. 요소에 "user-select:none" 코드만 설정하면 됩니다. user-select 속성은 사용자가 텍스트를 선택할 수 있는지 여부를 설정하는 데 사용됩니다. 값이 없음은 텍스트를 선택할 수 없음을 의미합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

사용자 선택 속성은 CSS3의 새로운 속성으로, 사용자가 텍스트를 선택할 수 있는지 여부를 설정하는 데 사용됩니다. 교체 요소를 제외한 모든 요소에 사용할 수 있습니다. 자세한 내용은 다음 CSS3 문서 설명을 참조하세요.

(1) 구문

**user-select:**none | text | all | element

**기본값: **text

적용 범위: 대체 요소를 제외한 모든 요소

(2) 값 설명

none: 텍스트를 선택할 수 없습니다.

text: 텍스트를 선택할 수 있습니다.

all: 모든 콘텐츠를 전체적으로 선택할 수 있습니다. 하위 요소를 두 번 클릭하거나 상황에 따라 클릭하면 선택한 부분은 해당 하위 요소에서 역추적되는 가장 높은 상위 요소가 됩니다.

요소: 텍스트를 선택할 수 있지만 선택 범위는 요소 경계에 의해 제한됩니다.

(3) 설명

1.IE6-9는 이 속성을 지원하지 않지만 레이블 속성 onselectstart="return false; " 사용자 달성 - select:none의 효과; Safari 및 Chrome도 이 레이블 속성을 지원합니다.

2. 이 속성은 Opera12.5까지는 아직 지원되지 않지만 IE6-9와 마찬가지로 비공개 사용도 지원합니다. 이를 달성하려면 user-select:none의 효과가 해제됩니다.

3 Chrome 및 *Safari를 제외하고 텍스트가 -ms로 설정된 경우. -user-select:none;, 사용자 이 텍스트 블록 내에서 텍스트 선택을 시작할 수 없습니다. 그러나 사용자가 페이지의 다른 영역에서 텍스트를 선택하기 시작하면 해당 텍스트를 -ms-user-select:none *으로 설정하여 해당 영역 텍스트를 계속 선택할 수 있습니다. 기능은 userSelect

( 4) 예

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>

효과:

권장 학습:

html 비디오 튜토리얼

위 내용은 HTML에서 텍스트 선택을 취소하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!