JavaScript로 텍스트 선택 지우기


122

답을 찾을 수없는 간단한 질문 : JavaScript (또는 jQuery)를 사용하여 웹 페이지에서 선택할 수있는 텍스트를 선택 취소하려면 어떻게해야합니까? EG 사용자는 클릭하고 드래그하여 약간의 텍스트를 강조 표시합니다.이 선택을 지우는 deselectAll () 함수를 갖고 싶습니다. 어떻게 작성해야합니까?

도와 주셔서 감사합니다.

답변:


206
if (window.getSelection) {
  if (window.getSelection().empty) {  // Chrome
    window.getSelection().empty();
  } else if (window.getSelection().removeAllRanges) {  // Firefox
    window.getSelection().removeAllRanges();
  }
} else if (document.selection) {  // IE?
  document.selection.empty();
}

Mr. Y.


4
이것은의 존재 가 그것 document.selectionempty()방법의 존재를 의미 한다고 가정 합니다. 다른 모든 경우에서 메서드를 테스트 했으므로 empty최종 사례 에서도 테스트 할 수 있습니다.
Tim Down

jquery.tableCheckbox.js 플러그인에서 이것을 사용했습니다 .
Marco Kerwitz 2015 년

1
귀하의 제안에 따라 전체 작업 예제를 만들었지 만 몇 가지 추가 사항을 추가했습니다. jsfiddle.net/mkrivan/hohx4nes 가장 중요한 줄은 window.getSelection (). addRange (document.createRange ()); 이 IE가 없으면 일부 조건에서 텍스트를 선택 취소하지 않습니다. 그리고 방법 감지의 순서를 변경했습니다.
Miklos Krivan

당신은 내 친구를 구해줘! 나는 스크래치 패드를 사용하고 있었고 전체 페이지를 긁을 때 스크래치 패드 플러그인을 사용하기 전에이 좋은 스크립트를 사용하여 내 페이지를 선택 취소했습니다. 기본적으로 작동합니다! 감사합니다!
결합

1
나는 그 세례반 window.getSelection().removeAllRanges();IE (에지)와 사파리에서 잘 작동합니다.
chile

48

원하는 기능을 직접 테스트하는 것이 가장 좋습니다.

var sel = window.getSelection ? window.getSelection() : document.selection;
if (sel) {
    if (sel.removeAllRanges) {
        sel.removeAllRanges();
    } else if (sel.empty) {
        sel.empty();
    }
}

15

2014 년 탈선 사정 현황

나는 내 스스로 조사를했다. 내가 작성하고 요즘 사용하고있는 함수는 다음과 같습니다.

(function deselect(){
  var selection = ('getSelection' in window)
    ? window.getSelection()
    : ('selection' in document)
      ? document.selection
      : null;
  if ('removeAllRanges' in selection) selection.removeAllRanges();
  else if ('empty' in selection) selection.empty();
})();

기본적으로 getSelection().removeAllRanges()현재 모든 최신 브라우저 (IE9 + 포함)에서 지원됩니다. 이것은 분명히 앞으로 나아가는 올바른 방법입니다.

다음과 같은 호환성 문제가 설명되었습니다.

  • 이전 버전의 Chrome 및 Safari 사용 getSelection().empty()
  • IE8 이하 사용 document.selection.empty()

최신 정보

재사용을 위해이 선택 기능을 마무리하는 것이 좋습니다.

function ScSelection(){
  var sel=this;
  var selection = sel.selection = 
    'getSelection' in window
      ? window.getSelection()
      : 'selection' in document
        ? document.selection
        : null;
  sel.deselect = function(){
    if ('removeAllRanges' in selection) selection.removeAllRanges();
    else if ('empty' in selection) selection.empty();
    return sel; // chainable :)
  };
  sel.getParentElement = function(){
    if ('anchorNode' in selection) return selection.anchorNode.parentElement;
    else return selection.createRange().parentElement();
  };
}

// use it
var sel = new ScSelection;
var $parentSection = $(sel.getParentElement()).closest('section');
sel.deselect();

사람들이 여기에 기능을 추가하거나 표준이 발전함에 따라 업데이트 할 수 있도록 이것을 커뮤니티 위키로 만들었습니다.


7
그것은 내 대답과 똑같이하고 있습니다. 4 년 동안 변한 것은 없습니다.
Tim Down

3
끔찍하다. 말 그대로 다른 포스터에서 구현을 훔 쳤을뿐만 아니라 구문 적으로 완전히 폐기했습니다.
kamelkev

1

다음은 허용되는 답변이지만 두 줄의 코드입니다.

var selection = window.getSelection ? window.getSelection() : document.selection ? document.selection : null;
if(!!selection) selection.empty ? selection.empty() : selection.removeAllRanges();

유일한 removeAllRanges의 존재입니다 내가하지 않습니다 확인 -하지만 AFAIK 중 하나가 어떤 브라우저가 없다 window.getSelection거나 document.selection하지만 하지 않는 이 중 하나 .empty또는 .removeAllRanges그 속성.


0

window.getSelection ()을 사용하면 선택한 텍스트에 액세스 할 수 있습니다. 여기에서이를 조작하기 위해 수행 할 수있는 몇 가지 작업이 있습니다.

더 읽기 : 개발자 Mozilla DOM 선택


-1

오른쪽 클릭과 텍스트 선택을 방지하기 위해 이것을 스크립트에 추가하십시오.

var 'om'에 예외를 추가 할 수 있습니다.

var d=document,om=['input','textarea','select'];;
function ie(){if(d.all){(mg);return false;}}function mz(e){if(d.layers||(d.getElementById&&!d.all)){if(e.which==2||e.which==3){(mg);return false;}}}if(d.layers){d.captureEvents(Event.mousedown);d.onmousedown=mz;}else{d.onmouseup=mz;d.oncontextmenu=ie;}d.oncontextmenu=new Function('return false');om=om.join('|');function ds(e){if(om.indexOf(e.target.tagName.toLowerCase())==-1);return false;}function rn(){return true;}if(typeof d.onselectstart!='undefined')d.onselectstart=new Function('return false');else{d.onmousedown=ds;d.onmouseup=rn;}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.