如何使用Javascript获取文本区域内字符中的鼠标位置

How to get mouse position in characters inside textarea with Javascript

本文关键字：字符 鼠标 位置 区域 何使用 Javascript 获取 取文本      更新时间：2023-09-26

我正在页面上实现拖放功能。这个想法是用户可以从特殊位置开始拖动图像并将其拖放（释放鼠标左键）在文本区域内，这将发生特殊标签插入。
我对拖动本身没有问题，我遇到的问题是我无法确定鼠标在文本区域内的位置。我知道事件x和y位置mouseup并且我肯定知道鼠标指针在文本区域内，但无法确定我需要在哪个位置插入所需的标签。由于焦点不在文本区域内，因此selectionStart和selectionEnd属性为 0。另外，值得注意的是，我通过在处理程序中返回false来防止默认行为 mousemove否则默认行为会将图像本身放在文本区域中（这对于 base64 图像非常糟糕）。
以下是我目前拥有的代码。

window.onPreviewItemMouseDown = function (e) {
        var curTarget = $(e.currentTarget);
        var container = curTarget.parent();
        window.draggingImage = funcToGetId();
        $(document).on("mousemove", window.onPreviewItemDragged);
        $(document).on("mouseup", window.onPreviewItemDropped);
    };
window.onPreviewItemDragged = function (e) {
    return false;
};
window.onPreviewItemDropped = function (e) {
    var target = $(e.target);
    $(document).off("mousemove");
    $(document).off("mouseup");
    if (target[0].id === ID_TEXTAREA_TEXT) {
        // here I need to get mouse pointer position inside the text somehow
    }
    return false;
};

任何帮助，不胜感激。

在您的情况下，使用本机ondragstart事件而不是复杂的鼠标向下移动实现并操作要删除的数据会更容易。像这样：

document.getElementById('img').addEventListener('dragstart', function (e) {
    e.dataTransfer.setData("text", '[img]' + this.id + '[/img]');
});

jsFiddle的现场演示。或委派版本。请注意，您还可以委托给"特殊位置"元素，这可能会使页面运行得更快一些。

相关文章：