CSS나 자바스크립트로 텍스트 선택을 비활성화하려면 어떻게 해야 합니까?

CSS나 자바스크립트로 텍스트 선택을 비활성화하려면 어떻게 해야 합니까?

이 질문에는 이미 다음과 같은 답변이 있습니다.

텍스트 선택 강조 표시를 비활성화하는 방법 (45개 답변)

닫힘3년 전에.

저는 HTML/CSS/jQuery 갤러리를 만들고 있는데, 몇 페이지가 있습니다.

저에게는 jQuery 클릭 청취자와의 간단한 링크인 "다음" 버튼이 있습니다.

문제는 사용자가 버튼을 여러 번 클릭하면 해당 버튼의 텍스트가 선택된 뒤 전체 텍스트 줄이 선택된다는 점입니다.제 디자인이 정말 어두워서 정말 추하고 말도 안 되는 일입니다.

그래서 여기 제 질문이 있습니다: HTML에서 텍스트 선택을 비활성화할 수 있습니까? 그렇지 않다면 플래시와 텍스트 필드의 높은 수준의 구성이 몹시 그리울 것입니다.

<div 
 style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;" 
 unselectable="on"
 onselectstart="return false;" 
 onmousedown="return false;">
    Blabla
</div>

업데이트 2017년 1월:

내가 사용할 수 있을까요?user-select는 현재 Internet Explorer 9 이전 버전을 제외한 모든 브라우저에서 지원됩니다(그러나 안타깝게도 공급업체 접두사는 여전히 필요합니다).

---

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

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

---

비표준 기능(즉, 사양의 일부가 아님)임에 유의하십시오.모든 곳에서 작동하는 것이 보장되는 것은 아니며 브라우저마다 구현에 차이가 있을 수 있으며 향후 브라우저는 이에 대한 지원을 중단할 수 있습니다.

---

자세한 내용은 Mozilla Developer Network 설명서에서 확인할 수 있습니다.

크로스 브라우저 호환성을 위해 이 CSS 코드를 사용해 보십시오.

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

자바스크립트를 사용하여 원하는 작업을 수행할 수 있습니다.

if (document.addEventListener !== undefined) {
    // Not IE
    document.addEventListener('click', checkSelection, false);
} else {
    // IE
    document.attachEvent('onclick', checkSelection);
}

function checkSelection() {
    var sel = {};
    if (window.getSelection) {
        // Mozilla
        sel = window.getSelection();
    } else if (document.selection) {
        // IE
        sel = document.selection.createRange();
    }

    // Mozilla
    if (sel.rangeCount) {
        sel.removeAllRanges();
        return;
    }

    // IE
    if (sel.text > '') {
        document.selection.empty();
        return;
    }
}

비누 상자: 고객의 사용자 에이전트를 이런 식으로 함부로 건드리면 안 됩니다.클라이언트가 문서에서 항목을 선택하려면 문서에서 항목을 선택할 수 있어야 합니다.문서를 보는 사용자가 아니기 때문에 하이라이트 색상이 마음에 들지 않아도 상관 없습니다.

끌 수 있을지는 모르겠지만 색상 변경 가능합니다 :)

myDiv::selection,
myDiv::-moz-selection,
myDiv::-webkit-selection {
    background:#000;
    color:#fff;
}

그럼 "어두운" 디자인에 색상을 맞춰보고 어떻게 되는지 확인해보세요. :)

언급URL : https://stackoverflow.com/questions/3779534/how-do-i-disable-text-selection-with-css-or-javascript