IT박스

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

itboxs 2020. 7. 30. 10:12
반응형

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


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

도와 주셔서 감사합니다.


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

선택 해제 상황 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그 속성.


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

더 읽기 : 개발자 Mozilla DOM 선택

참고 URL : https://stackoverflow.com/questions/3169786/clear-text-selection-with-javascript

반응형