DIV를 선택할 수 없게 만드는 방법이 있습니까?

DIV를 선택할 수 없게 만드는 방법이 있습니까?

여기 여러분을 위한 흥미로운 CSS 질문이 있습니다!

투명 배경이 있는 텍스트 영역에 일종의 워터마크로 사용하고 싶은 텍스트가 중첩되어 있습니다.텍스트가 크고 텍스트 영역의 대부분을 차지합니다.문제는 사용자가 텍스트 영역을 클릭할 때 워터마크 텍스트를 대신 선택하는 경우가 있다는 것입니다.워터마크 텍스트를 절대 선택할 수 없기를 원합니다.z 인덱스가 낮으면 선택할 수 없을 거라고 예상했는데 브라우저는 항목을 선택할 때 z 인덱스 레이어에 신경을 쓰지 않는 것 같습니다.이 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>

emb의 원래 답변을 CSS에 몇 가지 추가로 업데이트했습니다.

우리는 다음 콤보를 사용해 왔습니다.

.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';

사용가능pointer-events: none;너의 CSS에

div {
  pointer-events: none;
}

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

자바스크립트 솔루션은 또한 모든 인기 있는 브라우저에서 효과적이기 위해서 "드래그스타트"에 영향을 미쳐야 할 것입니다.

자바스크립트:

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

jQuery:

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

부유한

텍스트 영역에 대한 간단한 배경 이미지면 충분하지 않을까요?

시도해 볼 수 있습니다.

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

웹킷 브라우저(예: Google Chrome 및 Safari)는 Mozilla의 -moz-user-select:none과 유사한 CSS 솔루션을 가지고 있습니다.

.no-select{    
    -webkit-user-select: none;
    cursor:not-allowed; /*makes it even more obvious*/
}

터치에 나타나는 회색 반투명 오버레이를 제거하고 싶다면 css를 추가합니다.

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;

네, 여러 가지 방법이 있습니다.

1. 당신은 간단히 추가할 수 있습니다.user-select및 CSS로 언및정정및none 식으로.

   div {
       user-select: none;
   }
   

2. CSS CSS 를 할 로 으로 이를 할 수 .::selection선택하고 선택 배경색을 자신의 색과 일치하도록 설정합니다.까다로워질 수도 있습니다.

   p::selection {
       background: rgba(0, 0, 0, 0)
   }
   

명백한 이유로 대부분의 경우 옵션 1이 최선의 옵션입니다!

사용하다

onselectstart="return false"

내용을 복사하는 것을 방지합니다.

z-index를 선택할 때는 절대 또는 상대적 위치를 명시적으로 설정해야 합니다.저도 비슷한 문제가 있었는데 이것으로 해결되었습니다.

언급URL : https://stackoverflow.com/questions/924916/is-there-a-way-to-make-a-div-unselectable