반응형
HTML 텍스트를 선택 불가능하게 만드는 방법
이 질문에는 이미 답변이 있습니다.
- 텍스트 선택 강조 표시를 비활성화하는 방법 41 답변
웹 페이지에 텍스트를 레이블로 추가하고 선택할 수 없게 만들고 싶습니다.
즉, 마우스 커서가 텍스트 위에있을 때 텍스트 선택 커서로 바뀌지 않기를 원합니다.
내가 달성하려는 것의 좋은 예는이 웹 사이트의 버튼 (질문, 태그, 사용자 등)입니다.
일반 바닐라 HTML로는이 작업을 수행 할 수 없으므로 JSF는 여기에서도 많은 작업을 수행 할 수 없습니다.
괜찮은 브라우저 만 타겟팅하는 경우 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 대체를 고려하십시오.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734</title>
<script>
window.onload = function() {
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
disableSelection(labels[i]);
}
};
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; };
}
}
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
이미 jQuerydisableSelection() 를 사용하고 있다면 jQuery 코드의 어느 곳에서나 사용할 수 있도록 jQuery에 새 함수 를 추가하는 또 다른 예가 있습니다.
<!doctype html>
<html lang="en">
<head>
<title>SO question 2310734 with jQuery</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.fn.extend({
disableSelection: function() {
this.each(function() {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
}
});
$(document).ready(function() {
$('label').disableSelection();
});
</script>
</head>
<body>
<label>Try to select this</label>
</body>
</html>
여기에 올바른 CSS 변형이 모두 포함 된 답변을 게시 한 사람이 없으므로 다음과 같습니다.
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
문제에 대한 최신의 완전한 솔루션은 순전히 CSS 기반이지만 이전 브라우저는 지원하지 않으므로 다른 브라우저와 같은 솔루션으로 대체해야합니다.
순수한 CSS에서 :
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
그러나 요소의 텍스트 위에 마우스 커서가 여전히 캐럿으로 바뀌므로 다음과 같이 추가하십시오.
cursor: default;
현대 CSS는 매우 우아합니다.
라이브 요소에서 작동하도록 위에 게시 된 jQuery 플러그인을 변경했습니다.
(function ($) {
$.fn.disableSelection = function () {
return this.each(function () {
if (typeof this.onselectstart != 'undefined') {
this.onselectstart = function() { return false; };
} else if (typeof this.style.MozUserSelect != 'undefined') {
this.style.MozUserSelect = 'none';
} else {
this.onmousedown = function() { return false; };
}
});
};
})(jQuery);
그렇다면 다음과 같이 할 수 있습니다.
$(document).ready(function() {
$('label').disableSelection();
// Or to make everything unselectable
$('*').disableSelection();
});
참고 URL : https://stackoverflow.com/questions/2310734/how-to-make-html-text-unselectable
반응형
'IT story' 카테고리의 다른 글
| 공급 업체 스크립트를 개별적으로 번들로 묶고 Webpack과 함께 필요에 따라 필요한 방법은 무엇입니까? (0) | 2020.05.29 |
|---|---|
| 디렉토리의 모든 파일 및 폴더 권한을 644/755로 변경하십시오. (0) | 2020.05.27 |
| 문자열 분할, ToList로 변환 (0) | 2020.05.27 |
| 데이터 프레임 목록을 만들려면 어떻게합니까? (0) | 2020.05.27 |
| 응용 프로그램에 대한 실행 권한을 변경할 수 없습니다 (0) | 2020.05.27 |