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

【问题标题】：How to get mouse position in characters inside textarea with Javascript如何使用Javascript在文本区域内的字符中获取鼠标位置
【发布时间】：2015-01-16 20:38:53
【问题描述】：

我正在页面上实现拖放功能。这个想法是，用户可以从特殊位置开始拖动图像并将其（释放鼠标左键）放到 textarea 中，在那里会发生特殊的标签插入。
我对拖动本身没有任何问题，我遇到的问题是我无法确定鼠标在 textarea 中的位置。我从mouseup 事件中知道x 和y 的位置，并且我明确知道鼠标指针在textarea 内，但无法确定我需要在哪个位置插入所需的标签。由于焦点不在文本区域内，selectionStart 和 selectionEnd 属性为 0。此外，值得注意的是，我通过在 mousemove 处理程序中返回 false 来防止默认行为 - 否则默认行为会将图像本身在 textarea 内（这对于 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;
};

感谢任何帮助。

【问题讨论】：

@Teemu 我尝试只插入图像标签，例如[img]image_id[/img]，而不是图像本身。这用于稍后在文本中显示图像（在文章中），此文本区域用于编辑文章的文本。
是的，我意识到了，这就是我删除评论的原因。
使用a native DOM event怎么样？在小提琴中，只需将图像拖放到 textarea 并检查放置的位置和内容。（似乎 jQuery 没有传递 e.dataTransfer 对象，因此是原生处理。）
@Teemu 在这种情况下，它会在文本中插入src 标签的内容。当src的内容为URL时，可以适用于以后的解析。但是，当 src 内部是 base64 时，它会在那里插入所有内容。此外，如果图像很大（1 MB 或更多），那么当您尝试这样做时，Chrome 会崩溃。这就是我从mousemove 处理程序中return false 的原因。
目前我唯一的解决方案是将所有图像加载到服务器，然后使用src 中的链接来拖放图像。之后解析 textarea 的内容并用正确的标签替换。

标签： javascript jquery html textarea dom-events

【解决方案1】：

在您的情况下，使用本机 ondragstart 事件而不是复杂的 mousedown-move-up 实现会更容易，并操纵数据以丢弃。像这样的：

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

A live demo at jsFiddle。或a delegated version。请注意，您还可以委托给“特殊位置”元素，这可能会使页面运行得更快一些。

【讨论】：

只是添加。有一种情况，当我想拒绝拖动操作时，因为src里面的base64中有太大的图像时，Chrome会崩溃。因此，对于这种情况，我还将添加mousedown 处理程序，我将从该处理程序中添加return false 用于此类图像。对于所有其他情况，您的解决方案非常适合。谢谢。
您也可以在 dragstart 处理程序中进行大小检查。如果图片太大，设置数据为""。或者您可以将ondrop 处理程序附加到textarea，如果图像太大，则取消删除。