javascript : 텍스트 선택 비활성화


84

내 웹리스트에서 텍스트 선택을 비활성화하기 위해 javascript를 사용하고 있습니다.

코드는 다음과 같습니다.

<script type="text/JavaScript">

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
</script>

유사한 스크립트는 여기 에서 찾을 수 있습니다 .

내 로컬 호스트에서 : 모든 브라우저 (Firefox, Chrome, IE 및 Safari)가 잘 작동합니다.

내 라이브 사이트에서 : Firefox를 제외하고 모두 괜찮습니다.

내 질문은 다음과 같습니다.

  1. 누구든지 Firefox가 라이브 사이트와 로컬 호스트에 대해 다르게 작동하는 이유에 대한 제안이 있습니까? 참고 : 자바 스크립트가 활성화됩니다.

  2. 내 스크립트가 너무 단순 할 수 있으므로 정확히 동일한 결과로 다음 을 시도했습니다.


4
이 경우 Javascript 사용을 피하는 것이 좋습니다. CSS를 사용하십시오 .이 질문
— RienNeVaPlu͢s

두 번째 스크립트는 너무 오래되었을 수 있습니다. fx 지원을 중단한다고 믿기 때문에! document.all을 제거하십시오
— mplungjan

9
나는 이것을하는 사이트를 싫어한다. 텍스트를 복사하려면 개발 도구를 열고 어쨌든 복사 할 수 있습니다. 이것은 불필요한 불편 일뿐입니다.
— uylmz

4
Reek이 말한 그대로입니다. 그럴만 한 이유가 없다면 이렇게하지 마십시오. 많은 사람들이 검색 할 항목을 선택하거나 사전을 사용하여 단어를 검색 할 수 있습니다. 이를 금지하는 것은 장기적으로 사람들을 사이트에서 멀어지게 할 수있는 성가신 일입니다.
— Czechnology

1
첫째, 나는 또한 단지 그것의 "재미"를 위해 선택 (텍스트 및 기타)을 금지하는 페이지를 싫어하지만,이를 비활성화하려는 합법적 인 이유 ( 예 : 마우스 제스처 구현) 가 있기 때문에 좋은 질문이라고 생각합니다. 또는 무엇이든 게임에서 텍스트 블록을 드래그 앤 드롭). 물론, 그 끝이 나쁜 달성하기 위해 JS를 사용하지만, CSS의 솔루션은 일부 브라우저에서, (그 문제가 user-select혼자가 아니 작업, 그것은처럼 "-vendor-"접두사가 필요합니다 -moz-user-select및 -webkit-user-select그래서 작동하도록, , 가능한 모든 변형을 none) 로 설정해야합니다 .
— Cyberknight

답변:


209

이 CSS 방법을 사용하십시오.

body{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

여기에서 동일한 답을 찾을 수 있습니다. CSS를 사용하여 텍스트 선택 강조 표시를 비활성화하는 방법?


6
: 또한이 답을 찾을 곳에서 링크를 추가 stackoverflow.com/questions/826782/...
— Heijden 데르 론 반

대단히 감사합니다. 본문의 CSS는 IE를 제외한 모든 경우에서 작동했습니다. IE에서이 문제를 해결할 수있는 깔끔한 CSS 솔루션이 있습니까? 이제 모든 브라우저를 커버하기 위해 Js와 CSS의 조합을 사용하고 있습니다 !! thk u.
— 아르페지오

1.이 asnwer가 솔루션으로 태그가 지정되지 않은 이유는 무엇입니까? ... 가장 정확하고 간단한 방법으로 문제의 문제를 해결합니다. 2.이 CSS 정의는 BODY뿐만 아니라 모든 HTML 요소에서 구현 될 수 있음을 언급해야합니다.
— TheCuBeMan

1
@TheCuBeMan "user-select"는 비표준 기능이므로 IMO는 최상의 솔루션이 아닙니다.
— ndugger

1
아마도 최선의 접근 방식 일 것입니다. 브라우저는 복잡하고 모두 다른 테이크를 가지고 있기 때문에 다르게 처리합니다. 즉, 의도 한 UX (선택 없음)를 제공하면서 사용자가 정말로 원하는 경우 선택할 수 있도록합니다 . W3C 초안 에는 더 많은 메모가 있으며 caniuse 는 환상적인 지원을 보여줍니다. 브라우저가 다르게 처리하는 것은 괜찮습니다. 사용자는 선호하는 브라우저가 제공하는 경험을 얻게됩니다.
— Shawn Erquhart 2017-08-24

24

드래그 기능을 제공하기 위해 슬라이더 UI 컨트롤을 작성 중입니다. 이것은 사용자가 드래그 할 때 콘텐츠가 선택되지 않도록하는 방법입니다.

function disableSelect(event) {
    event.preventDefault();
}

function startDrag(event) {
    window.addEventListener('mouseup', onDragEnd);
    window.addEventListener('selectstart', disableSelect);
    // ... my other code
}

function onDragEnd() {
    window.removeEventListener('mouseup', onDragEnd);
    window.removeEventListener('selectstart', disableSelect);
    // ... my other code
}

startDrag귀하의 DOM에 바인딩 :

<button onmousedown="startDrag">...</button>

모든 요소에서 텍스트 선택을 정적으로 비활성화하려면 요소가로드 될 때 코드를 실행합니다.

window.addEventListener('selectstart', function(e){ e.preventDefault(); });

      

2
이것은 CSS 솔루션이 contenteditable속성 이있는 div에 대해 작동하지 않기 때문에 가장 좋은 솔루션입니다 (예 : 사용자의 마우스로 컨트롤의 크기를 조정하는 동안 텍스트 선택을 비활성화하려는 경우).
— mbomb007

12

JavaScript의 경우 다음 기능을 사용하십시오.

function disableselect(e) {return false}
document.onselectstart = new Function (return false)
document.onmousedown = disableselect

선택을 활성화하려면 다음을 사용하십시오.

function reEnable() {return true}

원하는 곳 어디에서나이 기능을 사용하십시오.

document.onclick = reEnable

예외 new Function (return false)는 유효한 자바 스크립트 코드가 아닙니다. 단지 사용 document.onselectstart = disableselect.
— amik

@amik 어떻습니까 : document.oncontextmenu = new Function("return false;");또는 CSS 사용 :<body onselectstart="return false">
— Hassan Azimi

예 new Function("return false;"), 작동하지만 disableselect이미 가지고 있는 사용에 비해 불필요하게 복잡 합니다. onselectstart="return false"작동하지만 CSS와는 관련이 없습니다. 또한 나머지 답변도 잘못되었음을 알았습니다. reEnable기능이 전혀 작동하지 않습니다.
— amik

@amik haha ​​JavaScript에서는 아무것도 필요하지 않지만 여전히 수행합니다. 확실히 코드는 리팩토링 될 수 있지만 질문을 살펴보면 응답이 숙제를하려고하지 않는 질문에 답합니다.
— Hassan Azimi

하지만 SO는 교육을위한 장소이므로 기술적으로 잘못된 답을 제공하고 좋은 생각이 전혀 설명하지 않는 것을 고려합니다.
— amik

4

다음과 같은 html 페이지가있는 경우 :

    <본체
    onbeforecopy = "거짓 반환"
    ondragstart = "거짓 반환" 
    onselectstart = "거짓 반환" 
    oncontextmenu = "거짓 반환" 
    onselect = "document.selection.empty ()" 
    oncopy = "document.selection.empty ()">

모든 이벤트를 비활성화하는 간단한 방법이 있습니다.

document.write(document.body.innerHTML)

당신은 html 컨텐츠를 얻었고 다른 것들을 잃었습니다.


4

하나는 또한 사용할 수 있으며 모든 브라우저에서 정상적으로 작동하며 자바 스크립트가 필요합니다.

onselectstart = (e) => {e.preventDefault()}

예:

onselectstart = (e) => {
  e.preventDefault()
  console.log("nope!")
  }
Select me!


다른 하나의 js 대안, CSS 지원을 테스트하고 userSelect, 또는 MozUserSelectFirefox에 대해 비활성화합니다 .

let FF
if (CSS.supports("( -moz-user-select: none )")){FF = 1} else {FF = 0}
(FF===1) ? document.body.style.MozUserSelect="none" : document.body.style.userSelect="none"
Select me!


순수한 CSS, 동일한 논리. 경고 규칙은 모든 브라우저로 확장해야합니다. 이것은 장황 할 수 있습니다.

@supports (user-select:none) {
  div {
    user-select:none
  }
}

@supports (-moz-user-select:none) {
  div {
    -moz-user-select:none
  }
}
<div>Select me!</div>


0

이 텍스트를 복사하고 이전에 넣기 </body>

function disableselect(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function ("return false")

if (window.sidebar) {
  document.onmousedown = disableselect
  document.onclick = reEnable
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.