1

我的网页上有一个 textarea 元素，其中包含一些纯文本（字母数字、换行符、制表符、空格）。我知道如何获取光标的行和列。但是，我需要一种将它们转换为屏幕坐标的方法，这样我就可以在光标的确切位置显示一个浮动 div。我看到了两种方式

方法一：从屏幕上的(0,0)处获取textarea的偏移量。对于 x 坐标，遍历该行上的每个字符并将字符数乘以每个字符的宽度（制表符与实际字符的计算方式不同）并将其添加到原始偏移量。对于 y 坐标，将行数乘以每行的高度并将其添加到原始偏移量。但是，如何计算字符宽度和行高？

方法2：找一个javascript库。有人知道现有的 javascript 库/框架（例如 jQuery）可以做到这一点吗？我已经看过，似乎找不到任何东西。

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 回答