1

Web ページに、プレーン テキスト (英数字、改行、タブ、スペース) を含む textarea 要素があります。カーソルの行と列を取得する方法を知っています。しかし、カーソルの正確な位置にフローティング div を表示できるように、それらを画面座標に変換する方法が必要です。私には2つの方法が見えます

方法 1: 画面上の (0,0) からテキストエリアのオフセットを取得します。x-coord の場合、その行の各文字を繰り返し処理し、文字数に各文字の幅を掛けて (タブと実際の文字は別々にカウントされます)、それを元のオフセットに追加します。y 座標の場合、行数に各行の高さを掛けて、元のオフセットに追加します。しかし、文字の幅と行の高さを計算するにはどうすればよいですか?

方法 2: JavaScript ライブラリを検索します。これを行うjQueryなどの既存のjavascriptライブラリ/フレームワークを知っている人はいますか? 私は見ましたが、何も見つからないようです。

4

1 に答える 1

0

イベントが発生した後、onchangeイベントを確認しmouseMoveて座標を取得します。

var waiting;
function text_changed(event) { //attach this to onChange
     waiting = true;
     setTimeout('waiting = false',1000);
}
function mouse_moved(event) { //attach this to mouseMove
    if (waiting) {
        display_div(event.pageX,event.pageY);
        waiting = false;
    }
}
function display_div(x,y) {
    $('#floating_div').css('left',x).css('top',y).css('display','block');
}

必要に応じて、jQuery を通常の DOM スクリプトに置き換えます。

function display_div(x,y) {
    var elmt = document.getElementById('floating_div');
    elmnt.setAttribute('style','left:'+x+';top:'+y+';display:block');
}
于 2012-08-12T05:22:08.263 に答える