HTML 페이지에서 텍스트를 선택 불가능하게 만드는 방법이 있습니까?[복제하다]

StackOverflow https://stackoverflow.com/questions/69430

문제

이 질문에는 이미 답변이 있습니다.

탭 이름과 같이 선택하면 보기에 좋지 않은 일부 텍스트 요소를 사용하여 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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top