使用 x 和 y 位置设置 textarea 的插入符号位置答案

【问题标题】：Set textarea's caret position using x and y position使用 x 和 y 位置设置 textarea 的插入符号位置
【发布时间】：2013-07-31 08:32:19
【问题描述】：

我想实现内联编辑，所以如果用户单击带有一些文本的 div，textarea 将出现在与单击 div 的位置相同的位置，并从 div 中获取文本。这对我来说很好，但我接下来要做的是根据 div click 事件的 x 和 y 位置设置 textarea 的插入符号位置。有什么想法吗？

HTML：

<div id="content" style="display: block; z-index: 10">Some text</div>

<textarea id="editor" style="position: absolute; display: none; z-index: 11"></textarea>

JS：

$('#content').click(function(e) {
    var content = $(this);
    var editor = $('#editor');

    var position = content.offset();

    editor.css('left', position.left);
    editor.css('top', position.top);
    editor.val(content.text());
    editor.show();

    var mousePosition = { x: e.offsetX, y: e.offsetY };

    // here I want to set the #editor caret position at the same place,
    // where user clicks the #content (mousePosition variable)
});

【问题讨论】：

插入符号始终定位在文本节点上，您不能将其定位到空白区域。
该区域不会为空 - 它将具有与 div 相同的内容。
developer.mozilla.org/en-US/docs/Web/HTML/Content_Editable
我认为 contenteditable 功能会导致问题，当您使用诸如 Knockout 或 Angular 之类的绑定工具时。如果您查看一些流行的任务管理工具，例如 wunderlist.com 或 asana.com，它们并不使用 contenteditable。
为什么会有这些缺点？这个问题有什么问题吗？

标签： javascript html textarea

【解决方案1】：

看起来你可以这样做：

createTextArea = function (e) {
    var range = window.getSelection().getRangeAt(0),
        start = range.startOffset,
        target = e.target,
        setPoint;
    while (target.tagName.toLowerCase() !== 'div') {
        target = target.parentElement;
        if (!target) return;
    }
    range.setStart(target, 0);
    setPoint = range.toString().length;
    // place and show #editor
    editor.focus();
    editor.setSelectionRange(setPoint, setPoint);
    return;
};

An example at jsFiddle。请注意，这仅适用于现代浏览器。旧版 IE 没有 Input API，Selection/Range 模型完全不同。

【讨论】：

好的，谢谢。我同时找到了解决方案:)
感谢您的解决方案。为我节省了很多时间。我还为您的示例创建了一个稍微更改的版本，允许标记一系列文本以防它位于同一元素中。见jsfiddle.net/BY5NL/3

【解决方案2】：

我找到了解决办法：

JS：

function getCaretPosition(editableDiv) {
    var caretPos = 0, containerEl = null, sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0);
            if (range.commonAncestorContainer.parentNode == editableDiv) {
                caretPos = range.endOffset;
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        if (range.parentElement() == editableDiv) {
            var tempEl = document.createElement("span");
            editableDiv.insertBefore(tempEl, editableDiv.firstChild);
            var tempRange = range.duplicate();
            tempRange.moveToElementText(tempEl);
            tempRange.setEndPoint("EndToEnd", range);
            caretPos = tempRange.text.length;
        }
    }
    return caretPos;
}

$.fn.selectRange = function (start, end) {
    if (!end) end = start;
    return this.each(function () {
        if (this.setSelectionRange) {
            this.focus();
            this.setSelectionRange(start, end);
        } else if (this.createTextRange) {
            var range = this.createTextRange();
            range.collapse(true);
            range.moveEnd('character', end);
            range.moveStart('character', start);
            range.select();
        }
    });
};

用法：

$('#content').click(function (e) {
    var content = $(this);
    var editor = $('#editor');

    var caret = getCaretPosition(this);

    var position = content.offset();

    editor.css('left', position.left);
    editor.css('top', position.top);
    editor.val(content.text());
    editor.show();

    var mousePosition = { x: e.offsetX, y: e.offsetY };

    // here I want to set the #editor caret position at the same place,
    // where user clicks the #content (mousePosition variable)

    editor.selectRange(caret, caret);
});

【讨论】：