it-swarm-ko.com

HTML 페이지에서 텍스트를 선택할 수 없게 만드는 방법이 있습니까?

탭 이름과 같은 일부 텍스트 요소가있는 HTML UI를 작성 중입니다. 불행히도 사용자가 탭 이름을 두 번 클릭하는 것이 매우 쉽습니다.이 탭 이름은 많은 브라우저에서 기본적으로 선택됩니다.

JavaScript 트릭 으로이 문제를 해결할 수 있습니다 (해답도보고 싶습니다).하지만 CSS/HTML에 모든 브라우저에서 직접 작동하는 무언가가 실제로 있기를 바랍니다.

javascripthtmlcsscross-browsertextselection
136
Tyler

대부분의 브라우저에서 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> 안에있는 모든 요소의 시작 태그에 속성을 넣어야합니다. 이것이 문제라면, 대신 자바 스크립트를 사용하여 요소의 자손에 대해 재귀 적으로이를 수행 할 수 있습니다.

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"));
187
Tim Down
<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

41
dimarzionist

올바른 CSS 변형은 모두 다음과 같습니다.

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
32
Blowsie

이 시도:

<div onselectstart="return false">some stuff</div>

간단하지만 효과적입니다 ... 모든 주요 브라우저의 현재 버전에서 작동합니다.

13
Stephen M. Redd

Firefox의 경우 CSS 선언 "-moz-user-select"를 "none"에 적용 할 수 있습니다. 그들의 문서를 확인하십시오 ser-select.

미래의 "사용자 선택"에 대한 "미리보기"이므로 Opera 또는 WebKit 기반 브라우저가이를 지원할 것입니다. 나는 또한 InternetplExplorer를 위해 무언가를 찾는 것을 기억하지만, 나는 무엇을 기억하지 못한다 :).

어쨌든 텍스트 선택으로 인해 동적 기능이 작동하지 않는 특정 상황이 아니라면 웹 페이지에서 사용자가 기대하는 것을 무시하고 원하는 텍스트를 선택할 수 있습니다.

11
Jorge Alves

여기에 설명 된 CSS로 어느 정도의 성공을 거두고 있습니다 http://www.quirksmode.org/css/selection.html :

::selection {
    background-color: transparent;
}

AIR 응용 프로그램 (WebKit 엔진)의 일부 ThemeRoller ul 요소와 관련된 대부분의 문제를 해결했습니다. 여전히 작은 (약 15 x 15) 무의미한 패치가 선택되었지만 이전에는 페이지의 절반이 선택되었습니다.

8
jlleblanc

Z- 색인이 더 높은 텍스트 영역 위에 div를 배치하고이 div에 투명한 GIF 배경 그래픽을 제공하십시오.

조금 더 생각한 후 참고 사항-이 '커버'를 연결해야 탭을 클릭하면 탭이 있어야 할 위치로 이동합니다. 즉 앵커 요소를 display:box, 너비 및 높이 및 투명한 배경 이미지가 설정되었습니다.

6
Dave Rutledge

Safari의 경우 -khtml-user-select: none, Mozilla의 -moz-user-select (또는 JavaScript에서 target.style.KhtmlUserSelect="none";).

4
Alan Hensel

선택을 억제하는 것이 바람직한 이유에 대한 예를 보려면 SIMILE TImeline 을 참조하십시오. 드래그 앤 드롭을 사용하여 타임 라인을 탐색합니다. 실수로 수직 마우스를 움직이면 레이블이 예기치 않게 강조 표시됩니다. 이상해 보인다.

4
pdc

관심있는 사람들을위한 Sass mixin (scss)이 있습니다. Compass /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가 더 강력한 방식으로 수행하지만 선택한 공급 업체에 대한 지원 만 추가하십시오.

3
rgb

"콘텐츠가 정말 흥미 롭다면 궁극적으로 콘텐츠를 보호하기 위해 할 수있는 일은 거의 없습니다"

그것은 사실이지만 대부분의 복사는 "궁극적으로"또는 괴짜 나 결정적인 표절 자 또는 그와는 아무 관련이 없습니다. 일반적으로 우둔한 사람들에 의한 우연한 복제이며 심지어 간단하고 쉽게 패배하는 보호 (우리와 같은 사람들이 쉽게 물리 치기)는 그것들을 막는 데 아주 효과적입니다. 그들은 "소스보기"나 캐시 또는 다른 것에 대해 전혀 모른다. 웹 브라우저가 무엇인지 또는 브라우저를 사용하고 있는지조차 모른다.

3
Big Bill

좋지 않은 경우 CSS를 사용하여 선택한 섹션의 모양을 변경할 수 있습니다.

1
Wedge

이미지도 선택할 수 있습니다.

텍스트를 선택하려는 곳에서도 발생할 수 있으므로 JavaScript를 사용하여 텍스트를 선택 취소하는 데에는 제한이 있습니다. 풍부하고 성공적인 경력을 보장하기 위해 브라우저가 평소보다 영향력을 미치거나 관리하는 데 필요한 모든 요구 사항을 피하십시오.

1
Kinjal Dixit

Flickr의 경우와 같이 모든 JavaScript 또는 CSS 메소드는 Firebug로 쉽게 우회됩니다.

CSS에서 ::selection pseudo-element 를 사용하여 강조 색상을 변경할 수 있습니다.

탭이 링크이고 활성 상태의 점선 사각형 이 문제가되는 경우 해당 탭도 제거 할 수 있습니다 (물론 사용성 고려).

1
Taylor Edmiston

선택성을 끄면 사용자 경험이 향상되는 경우가 많습니다.

예를 들어, 사용자가 연관된 인터페이스 요소의 텍스트를 복사하지 않고 페이지에서 텍스트 블록을 복사 할 수 있습니다 (복사되는 텍스트 내에 산재 될 수 있음).

1
kbcom

다음은 쓰기 라인을 제거하면 작동하지 않는 Firefox에서 흥미롭게 작동합니다. 누구나 쓰기 라인이 필요한 이유를 알 수 있습니다.

<script type="text/javascript">
document.write(".");
document.body.style.MozUserSelect='none';
</script>
0
hbtdev