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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!