選択したテキストの末尾にある最上位レイヤの位置div（ポップアップ/ツールチップのような）

Question

ポップアップ/ツールチップのように選択したテキストの最後にdivを配置することはできますか？テキストがページで選択されていますが、入力またはテキストエリアでは選択されていません。

編集：私は明確にする必要があると思う、私はすでにtextselectイベントを持って、私はちょうど選択されたテキストの位置を決定したい。

EDIT2：私はそのイベント自体はpageXとpageY cooridnatesを持って実現し、私はあなたが上記のポップアップを配置するテキストのオフセットトップを取ることをつかむと

Answer 1

私のポップアップを配置するためにそれを使用するだけでできました、および http://jsfiddle.net/UuGtm/3/

$("#popup").css("top",parseInt($("#text").offset().top)-parseInt($("#popup").height()); 

Answer 2

jQueryのselectイベントを入力し、テキストエリアに制限されているポップアップの高さによって、それを減らします。

文書全体でselect eventを検出する簡単な方法はありません。IEにはすべての要素に実装された選択イベントがありますが、他のブラウザでは入力のみがあります。あなたのページでキーアップとマウスアップイベントを処理することでそれを行うことができます。

ここに例を示します

example.Selector = {}; 
//each browser has a paricular getSelection . 
example.Selector.getSelected = function(){ 
    var t = ''; 
    if(window.getSelection){ 
    t = window.getSelection(); 
    }else if(document.getSelection){ 
    t = document.getSelection(); 
    }else if(document.selection){ 
    t = document.selection.createRange().text; 
    } 
    return t; 
} 

//bind a mouseup event handler to document 
example.Selector.mouseup = function(){ 
    var st = example.Selector.getSelected(); 
    if(st!=''){ 
    //display yout tooltip or popup here 

    } 
} 

$(document).ready(function(){ 
    $(document).bind("mouseup", example.Selector.mouseup); 
}); 

ここでの実施例は、私が全部を書き出すための時間を持っていないが、あなたはmouseupのいくつかの組み合わせを使用することができるかもしれませんhttp://jsfiddle.net/chemouna/k6yVC/

Answer 3

申し訳ありませんイベントリスナーをwindow.getSelection()とし、マウスを上に移動して選択したテキストを取得します。そこから、その親要素を見つけて、divを、絶対位置を選択したテキストの近くに追加します。