jQuery : 특정 div에서만 트리거 keydown

Question

두 개의 DIV 요소가있는 페이지가 있습니다. 사용자가 CTRL + ENTER 버튼 콤보를 누르면, 이전에 선택한 텍스트 (alert()를 통해)를 표시해야합니다. 나는 solution을 발견했고 그것은 매력처럼 작동하지만 여전히 남아있는 것이 하나 있습니다.

선택한 텍스트가 "main_content"클래스의 DIV 안에있는 경우에만 이벤트 트리거를 만들어야합니다. $ ('DIV.main_content')에 keyup을 할당하려고 시도했지만 작동하지 않습니다.

$ ('DIV.main_content') 안에있는 텍스트가 선택된 경우에만 이벤트 트리거를 만들 수 있습니까? Selection 객체가 아닌 문자열을 반환 window.getSelection() : 당신은 getSelectedText() 기능에 오류가

// Get user selection text on page 
function getSelectedText() { 
    if (window.getSelection) { 
     return window.getSelection(); 
    } 
    else if (document.selection) { 
     return document.selection.createRange().text; 
    } 
     return ''; 
} 

$(document).ready(function(){ 
    $(document).keydown(function(e) { 
     if(e.which == 13 && e.ctrlKey) { 
     alert(getSelectedText()); 
     return false; 
     } 
    }); 
}); 

See the code with markup in jsFiddle

Answer 1

: 여기

는 전체 문서에 트리거 작업 코드입니다. alert()이 전달 된 인수를 문자열로 변환하기 때문에이 결과를 alert()으로 전달한다는 사실은 이것을 마스크합니다.

다음은 특정 클래스가 포함 된 <div> 요소 내에 선택 항목이 완전히 포함되어 있는지 확인하는 코드입니다. 그것은 모든 주요 브라우저에서 작동합니다.

라이브 예 : http://www.jsfiddle.net/cVgsy/1/

// Get user selection text on page 
function getSelectedText() { 
    if (window.getSelection) { 
     return window.getSelection().toString(); 
    } 
    else if (document.selection) { 
     return document.selection.createRange().text; 
    } 
    return ''; 
} 

function isSelectionInDivClass(cssClass) { 
    var selContainerNode = null; 
    if (window.getSelection) { 
     var sel = window.getSelection(); 
     if (sel.rangeCount) { 
      selContainerNode = sel.getRangeAt(0).commonAncestorContainer; 
     } 
    } else if (document.selection && document.selection.type != "Control") { 
     selContainerNode = document.selection.createRange().parentElement(); 
    } 
    if (selContainerNode) { 
     var node = selContainerNode; 
     while (node) { 
      if (node.nodeType == 1 && node.nodeName == "DIV" && $(node).hasClass(cssClass)) { 
       return true; 
      } 
      node = node.parentNode; 
     } 
    } 
    return false; 
} 

$(document).ready(function(){ 
    $(document).keydown(function(e) { 
     if(e.which == 13 && e.ctrlKey && isSelectionInDivClass("main_content")) { 
      alert(getSelectedText()); 
      return false; 
     } 
    }); 
}); 

Answer 2

그것은 흥미로운 질문이다. 다음 아이디어가있다 : div에 mouseup 이벤트를 catch해야한다. 예를 들어 는 :

따라서, 귀하의 경우에 당신은 같은 것을 할 수 있습니다

var selectedText = ""; 
$(".yourdiv").mouseup(function(){ 
if (window.getSelection) 
    selectedText = window.getSelection(); 

else if (document.selection) 
    selectedText = document.selection.createRange().text; 

    alert(selectedText) 

}); 

그리고 변수 selectedText 매장 선택한 텍스트가 될 것입니다.