텍스트 영역 및 입력 외부 선택 선택 방법

Question

jQuery select 이벤트는 textarea 및 input:text으로 제한됩니다. <div>과 같은 일반 요소에서 선택을 처리하는 방법이 있습니까?

Answer 1

jQuery의 select 이벤트는 기본 브라우저 select 이벤트를 랩핑합니다. IE 및 WebKit의 모든 종류의 선택에 대해 발생하지만 다른 브라우저에서는 입력 및 텍스트 영역에서만 발생합니다. 당신은 완벽하게 작동의 누가, 누구에게도 비슷한 답변을 많이 볼 수 있습니다

• Selected text event trigger in Javascript
• Can I get a Javascript event from the selection of text outside of text or textarea?

:

는

이 질문은 전에 몇 번을왔다. 첫째, 키보드로 선택하거나 편집 및 컨텍스트 브라우저 메뉴에서 "모두 선택"옵션을 통해 선택을 고려해야합니다. 두 번째로, 선택 텍스트를 보면서 선택 변경을 확인하는 것은 전적으로 신뢰할 만하지 않습니다. 사용자가 문서의 다른 위치에서 동일한 텍스트를 선택하면 해당 텍스트가 선택되지 않습니다.

다음은 대부분의 문제를 해결하는 코드입니다. 선택 사항을 폴링하지 않으면 편집 및 컨텍스트 메뉴에서 "모두 선택"에 대해 수행 할 수있는 작업이 없습니다.

var addSelectHandler = function(callback) { 
    var selectionChangeEventHandler; 

    if (typeof window.getSelection != "undefined" && typeof document.addEventListener != "undefined") { 
     var previouslySelected = null; 

     var rangesEqual = function(r1, r2) { 
      return r1.startContainer === r2.startContainer && r1.startOffset === r2.startOffset && 
        r1.endContainer === r2.endContainer && r1.endOffset === r2.endOffset; 
     }; 

     selectionChangeEventHandler = function() { 
      var sel = window.getSelection(), selectedRanges = [], range; 
      var changed = !previouslySelected || (sel.rangeCount != previouslySelected.length); 
      for (var i = 0, len = sel.rangeCount; i < len; ++i) { 
       range = sel.getRangeAt(0).cloneRange(); 
       selectedRanges[i] = range; 
       if (!changed && !rangesEqual(range, previouslySelected[i])) { 
        changed = true; 
       } 
      } 
      previouslySelected = selectedRanges; 
      if (changed) { 
       callback(); 
      } 
     }; 

     document.addEventListener("mouseup", selectionChangeEventHandler, false); 
     document.addEventListener("keyup", selectionChangeEventHandler, false); 
    } else if (typeof document.selection != "undefined" && typeof document.attachEvent != "undefined") { 
     // This is IE, which fires a selectionchange event for any selection 
     document.attachEvent("onselectionchange", callback); 
    } 
}; 

addSelectHandler(function() { 
    alert("Selection changed"); 
} 

Answer 2

function getSelText() 
{ 
    var txt = ''; 
     if (window.getSelection) 
    { 
        txt = window.getSelection(); 
             } 
    else if (document.getSelection) 
    { 
        txt = document.getSelection(); 
            } 
    else if (document.selection) 
    { 
        txt = document.selection.createRange().text; 
    } 
    return txt; 
} 

$(document).mouseup(function() { 
    alert(getSelText()); 
}); 

jQuery에 하나가 있는지 알 수 없지만이 플러그인을 사용하여 mouseup 이벤트를 연결하는 새 플러그인을 만들 수 있습니다.