웹페이지를 만들 때 기본적으로 선택할 수 없는 라벨을 추가해야 할 수도 있습니다. 이는 텍스트를 복사하거나 강조 표시하지 않으려는 버튼이나 탐색 요소에 특히 유용할 수 있습니다.
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>
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 라이브러리를 확장할 수 있습니다.
$.fn.disableSelection = function() { this.each(function() { disableSelection(this); }); };
그런 다음 다음과 같이 모든 레이블에서 선택을 비활성화할 수 있습니다.
$("label").disableSelection();
위 내용은 HTML 레이블에서 텍스트 선택을 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!