HTML 페이지에서 텍스트를 선택 불가능하게 만드는 방법이 있습니까?[복제하다]
-
09-06-2019 - |
문제
이 질문에는 이미 답변이 있습니다.
탭 이름과 같이 선택하면 보기에 좋지 않은 일부 텍스트 요소를 사용하여 HTML UI를 구축하고 있습니다.불행하게도 사용자가 탭 이름을 두 번 클릭하는 것은 매우 쉽습니다. 탭 이름은 많은 브라우저에서 기본적으로 선택됩니다.
JavaScript 트릭으로 이 문제를 해결할 수도 있습니다(저도 그 답변을 보고 싶습니다). 하지만 CSS/HTML에 모든 브라우저에서 직접 작동하는 무언가가 있기를 정말로 바랍니다.
해결책
대부분의 브라우저에서는 CSS를 사용하여 이를 달성할 수 있습니다.
*.unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
/*
Introduced in IE 10.
See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
*/
-ms-user-select: none;
user-select: none;
}
IE <10 및 Opera의 경우 다음을 사용해야 합니다. unselectable
선택 취소할 요소의 속성입니다.HTML의 속성을 사용하여 이를 설정할 수 있습니다.
<div id="foo" unselectable="on" class="unselectable">...</div>
안타깝게도 이 속성은 상속되지 않습니다. 즉, 속성 내부의 모든 요소의 시작 태그에 속성을 넣어야 합니다. <div>
.이것이 문제라면 대신 JavaScript를 사용하여 요소의 자손에 대해 이 작업을 재귀적으로 수행할 수 있습니다.
function makeUnselectable(node) {
if (node.nodeType == 1) {
node.setAttribute("unselectable", "on");
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));
다른 팁
<script type="text/javascript">
/***********************************************
* Disable Text Selection script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
function disableSelection(target){
if (typeof target.onselectstart!="undefined") //IE route
target.onselectstart=function(){return false}
else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
target.style.MozUserSelect="none"
else //All other route (ie: Opera)
target.onmousedown=function(){return false}
target.style.cursor = "default"
}
//Sample usages
//disableSelection(document.body) //Disable text selection on entire body
//disableSelection(document.getElementById("mydiv")) //Disable text selection on element with id="mydiv"
</script>
편집하다
코드는 분명히 http://www.dynamicdrive.com
올바른 CSS 변형은 모두 다음과 같습니다.
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
이 시도:
<div onselectstart="return false">some stuff</div>
간단하지만 효과적인...모든 주요 브라우저의 최신 버전에서 작동합니다.
Firefox의 경우 CSS 선언 "-moz-user-select"를 "none"에 적용할 수 있습니다.해당 문서를 확인하세요. 사용자 선택.
미래의 "사용자 선택"에 대한 "미리보기"이므로 아마도 그럴 수도 있습니다. 오페라 또는 웹킷기반 브라우저가 이를 지원합니다.또한 Internet Explorer에서 뭔가를 찾았던 기억이 나지만 무엇인지 기억이 나지 않습니다. :)
어쨌든 텍스트 선택으로 인해 일부 동적 기능이 실패하는 특정 상황이 아니라면 사용자가 웹 페이지에서 기대하는 것, 즉 원하는 텍스트를 선택할 수 있는 것을 재정의해서는 안 됩니다.
여기에 설명된 CSS로 어느 정도 성공을 거두었습니다. http://www.quirksmode.org/css/selection.html:
::selection {
background-color: transparent;
}
ThemeRoller와 관련된 대부분의 문제를 해결했습니다. ul
AIR 응용 프로그램(WebKit 엔진)의 요소입니다.아직도 작은 것을 얻고 있습니다 (약.15 x 15) 아무것도 선택되지 않은 패치이지만 이전에는 페이지의 절반이 선택되었습니다.
Z-색인이 더 높은 텍스트 영역 위에 div를 절대적으로 배치하고 이러한 div에 투명 효과를 제공합니다. GIF 배경 그래픽.
좀 더 생각한 후에 참고하세요. 이러한 '표지'를 연결해야 하므로 이를 클릭하면 탭이 있어야 할 위치로 이동하게 됩니다. 즉, 앵커 요소를 다음으로 설정한 상태에서 이 작업을 수행할 수 있거나 수행해야 함을 의미합니다. display:box
, 너비 및 높이 설정과 투명한 배경 이미지가 포함됩니다.
선택을 억제하는 것이 바람직한 이유에 대한 예는 다음을 참조하세요. 비슷한 타임라인, 드래그 앤 드롭을 사용하여 타임라인을 탐색하는 동안 실수로 수직 마우스를 움직이면 레이블이 예기치 않게 강조 표시되어 이상해 보입니다.
사파리의 경우, -khtml-user-select: none
, Mozilla와 마찬가지로 -moz-user-select
(또는 JavaScript에서는 target.style.KhtmlUserSelect="none";
).
"당신의 콘텐츠가 정말 흥미 롭다면 궁극적으로 그것을 보호하기 위해 할 수있는 일은 거의 없습니다."
그것은 사실이지만, 내 경험에 따르면 대부분의 복사는 "궁극적으로"나 괴짜, 확고한 표절자 또는 이와 유사한 것과는 아무런 관련이 없습니다.이는 일반적으로 무지한 사람들에 의한 무심한 복사이며, 간단하고 쉽게 패배할 수 있는 보호 장치(즉, 우리 같은 사람들이 쉽게 패배할 수 있음)도 이를 막는 데 꽤 효과적입니다.그들은 "소스 보기"나 캐시 또는 기타 사항에 대해 아무것도 모릅니다...도대체 그들은 웹 브라우저가 무엇인지, 자신이 사용하고 있는지조차 모릅니다.
여기 사스 관심 있는 분들을 위해 mixin(scss)을 사용하세요. 나침반/CSS 3에는 사용자 선택 믹스인이 없는 것 같습니다.
// @usage use within a rule
// ex. img {@include user-select(none);}
// @param assumed valid user-select value
@mixin user-select($value)
{
& {
-webkit-touch-callout: $value;
-webkit-user-select: $value;
-khtml-user-select: $value;
-moz-user-select: $value;
-ms-user-select: $value;
user-select: $value;
}
}
Compass는 보다 강력한 방식으로 이를 수행하지만, 즉선택한 공급업체에 대한 지원만 추가하세요.
보기에 좋지 않으면 CSS를 사용하여 선택한 섹션의 모양을 변경할 수 있습니다.
Firebug를 사용하면 모든 JavaScript 또는 CSS 메서드를 쉽게 우회할 수 있습니다(Flickr의 경우처럼).
당신은 사용할 수 있습니다 ::selection
의사 요소 CSS에서 강조 색상을 변경합니다.
탭이 링크이고 활성 상태의 점선 직사각형 문제가 되는 부분도 제거할 수 있습니다(물론 유용성을 고려하세요).
선택성을 끄면 사용자 경험이 향상되는 경우가 많습니다.
예를 들어 사용자가 페이지와 관련된 인터페이스 요소의 텍스트를 복사하지 않고 페이지의 텍스트 블록을 복사할 수 있도록 허용합니다(복사되는 텍스트 내에 삽입됩니다).
이미지도 선택할 수 있습니다.
JavaScript를 사용하여 텍스트를 선택 취소하는 데는 제한이 있습니다. 선택하려는 위치에서도 이러한 일이 발생할 수 있기 때문입니다.풍부하고 성공적인 경력을 보장하려면 일반적인 것 이상으로 브라우저에 영향을 미치거나 관리하는 능력이 필요한 모든 요구 사항을 피하십시오.물론 그들이 당신에게 아주 좋은 급여를 주지 않는 한 말이죠.
다음은 Firefox에서 흥미롭게도 쓰기 줄을 제거하면 작동하지 않습니다.누구든지 쓰기 라인이 필요한 이유를 알 수 있습니다.
<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>