> 웹 프론트엔드 > CSS 튜토리얼 > HTML 레이블에서 텍스트 선택을 방지하는 방법은 무엇입니까?

HTML 레이블에서 텍스트 선택을 방지하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-11-11 12:31:03
원래의
740명이 탐색했습니다.

How to Prevent Text Selection in HTML Labels?

HTML에서 텍스트 선택을 효과적으로 방지하는 방법

웹페이지를 만들 때 기본적으로 선택할 수 없는 라벨을 추가해야 할 수도 있습니다. 이는 텍스트를 복사하거나 강조 표시하지 않으려는 버튼이나 탐색 요소에 특히 유용할 수 있습니다.

CSS 기반 솔루션(최신 브라우저)

CSS3을 지원하는 최신 브라우저의 경우 , 다음 스타일을 사용할 수 있습니다.

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
로그인 후 복사

이 클래스를 라벨에 적용 요소:

<label class="unselectable">Unselectable Label</label>
로그인 후 복사

JavaScript 대체(이전 브라우저)

CSS3 지원이 부족한 구형 브라우저의 경우 JavaScript를 사용하여 텍스트 선택을 비활성화할 수 있습니다.

function disableSelection(element) {
    if (typeof element.onselectstart != 'undefined') {
        element.onselectstart = function() { return false; };
    } else if (typeof element.style.MozUserSelect != 'undefined') {
        element.style.MozUserSelect = 'none';
    } else {
        element.onmousedown = function() { return false; };
    }
}

disableSelection(document.querySelector("label"));
로그인 후 복사

이것은 JavaScript 함수는 페이지의 모든 레이블을 반복하고 적절한 이벤트 핸들러를 적용하여 선택을 비활성화합니다.

jQuery 해결 방법

jQuery를 사용하는 경우 다음 코드를 사용하여 jQuery 라이브러리를 확장할 수 있습니다.

$.fn.disableSelection = function() { 
    this.each(function() {  
        disableSelection(this);
    }); 
};
로그인 후 복사

그런 다음 다음과 같이 모든 레이블에서 선택을 비활성화할 수 있습니다.

$("label").disableSelection();
로그인 후 복사

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿