자바스크립트로 텍스트 선택 지우기

자바스크립트로 텍스트 선택 지우기

답을 찾을 수 없는 간단한 질문:

웹 페이지에서 선택할 수 있는 텍스트를 선택 취소하려면 자바스크립트(또는 jQuery)를 사용하려면 어떻게 해야 합니까?

예를 들어, 사용자가 클릭하고 끌어서 텍스트를 강조 표시합니다. - 이 선택을 취소하는 모든() 기능을 선택 취소합니다.어떻게 써야 할까요?

도와 주셔서 감사해요.

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();
}

Y씨에게 공을 돌립니다.

원하는 기능을 직접 테스트하는 최상의 방법:

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

2021년답변

• removeAllRanges()맥OS나 iOS의 사파리를 제외한 대부분의 브라우저에서 지원됩니다.

• empty()는 에 대한 별칭입니다.removeAllRanges()그리고 IE를 제외한 매우 오래된 브라우저를 포함한 모든 브라우저에서 지원됩니다.이 별칭은 규격에 정의되어 있으므로 안전하게 사용할 수 있습니다.

결론

그냥 사용.getSelection().empty(). 도우미 기능, 중첩된 삼원 if, 생성자, 그리고 다른 대답에서 닌자 반자이가 아닌 것은 필요 없습니다.10년 전에 필요했을 수도 있지만, 더 이상은 아닙니다.

IE 지원이 정말 필요하다면 테스트해 볼 수 있습니다.document.selection:

(window.getSelection ? window.getSelection() : document.selection).empty()

(IE에서 테스트 안 함)

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();

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

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

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그 재산에 대해서는

마우스 오른쪽 버튼을 클릭하거나 텍스트를 선택하지 못하도록 스크립트에 추가합니다.

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;}

언급URL : https://stackoverflow.com/questions/3169786/clear-text-selection-with-javascript