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.