jQuery：特定のdivでのみキー入力を有効にします

Question

私はDIV要素のカップルを持つページを持っています。ユーザーがCTRL + ENTERボタンのコンボを押すと、そのユーザーが以前に選択したテキストを（alert（）経由で）表示する必要があります。私はsolutionを見つけましたが、それは魅力のように機能しますが、まだ残っているものが1つあります。

私は、選択されたテキストがクラス "main_content"のDIVの中にあるときだけ、イベントトリガーを作る必要があります。私は$（ 'DIV.main_content'）にkeyupを割り当てようとしましたが、動作しません。

$（ 'DIV.main_content'）内のテキストが選択されている場合にのみイベントトリガーを作成する方法はありますか？ここで

は文書全体にトリガー作業コードです：

// 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

あなたはgetSelectedText()機能にエラーがあります：Selectionオブジェクトではなく、文字列を返しますwindow.getSelection()。これの結果を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イベントを捕捉する必要があります。たとえば は：

だから、あなたのケースでは、あなたがこのような何かを行うことができます。

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

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

    alert(selectedText) 

}); 

、変数selectedTextは、店舗選択したテキストになります。