将文本区域行/列转换为屏幕 x/y 坐标

Convert textarea row/column to screen x/y coordinates

本文关键字：屏幕 坐标 文本 区域 转换      更新时间：2023-09-26

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

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

方法 2：查找一个 JavaScript 库。有没有人知道现有的javascript库/框架，如jQuery可以做到这一点？我看过了，似乎什么也找不到。

触发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');
}
相关文章：