[css] DIV를 선택 불가능하게 만드는 방법이 있습니까?

Program / 글쓴이

다음은 흥미로운 CSS 질문입니다.

워터 마크로 사용하려는 일부 텍스트를 오버레이하는 투명한 배경의 텍스트 영역이 있습니다. 텍스트는 크고 텍스트 영역의 대부분을 차지합니다. 사용자가 텍스트 영역을 클릭하면 워터 마크 텍스트를 대신 선택하는 것이 문제입니다. 워터 마크 텍스트를 선택할 수 없도록하고 싶습니다. z-index에서 더 낮은 것이 있으면 선택할 수는 없지만 브라우저는 항목을 선택할 때 z-index 레이어에 신경 쓰지 않는 것 같습니다. 이 DIV를 선택할 수 없도록하는 트릭이나 방법이 있습니까?

답변

선택을 비활성화하기 위해 간단한 jQuery 확장을 작성했습니다 : jQuery 에서 선택 비활성화 . 당신은 그것을 통해 호출 할 수 있습니다$('.button').disableSelection();

또는 CSS (크로스 브라우저)를 사용하십시오.

.button {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -o-user-select: none;
}

답변

다음 CSS 코드는 거의 최신 브라우저에서 작동합니다.

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

IE의 경우 JS를 사용하거나 html 태그에 속성을 삽입해야합니다.

<div id="foo" unselectable="on" class="unselectable">...</div>

답변

CSS에 몇 가지 추가 사항을 사용하여 aleemb의 독창적 인 대답을 업데이트하십시오.

우리는 다음과 같은 콤보를 사용했습니다.

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html 에서 웹킷 터치 항목을 추가하라는 제안을 받았습니다.

2015 년 4 월 : 유용 할 수있는 변형으로 내 답변을 업데이트하기 만하면됩니다. DIV를 즉시 선택 가능 / 선택 불가능하게해야하고 Modernizr을 기꺼이 사용하려는 경우 다음은 자바 스크립트에서 깔끔하게 작동합니다.

    var userSelectProp = Modernizr.prefixed('userSelect');
    var specialDiv = document.querySelector('#specialDiv');
    specialDiv.style[userSelectProp] = 'none';

답변

Johannes가 이미 제안했듯이 배경 이미지는 CSS에서만 이것을 달성하는 가장 좋은 방법입니다.

JavaScript 솔루션은 모든 인기있는 브라우저에서 효과적이기 위해 “dragstart”에 영향을 미쳐야합니다.

자바 스크립트 :

<div onselectstart="return false;" ondragstart="return false;">your text</div>

jQuery :

var _preventDefault = function(evt) { evt.preventDefault(); };
$("div").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);

풍부한

답변

pointer-events: none;CSS에서 사용할 수 있습니다

div {
  pointer-events: none;
}

답변

당신은 이것을 시도 할 수 있습니다 :

<div onselectstart="return false">your text</div>

답변

텍스트 영역에 대한 간단한 배경 이미지가 아닌가?