Javascript 如何使用contenteditable将光标放置在div标记中文本的末尾

这里有很多解决办法

将光标放置在

输入

或

文本框

标记的文本末尾

目前，我将

div

标记与

contenteditable=“true”

一起使用，而不是使用

input

或

textbox

标记。 不幸的是，即使我将

val

替换为

text

以使代码正常工作，它们都没有按预期工作

$.fn.focusEnd = function() {
    $(this).focus();
    var tmp = $('<span />').appendTo($(this)),
        node = tmp.get(0),
        range = null,
        sel = null;

    if (document.selection) {
        range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        range = document.createRange();
        range.selectNode(node);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
    tmp.remove();
    return this;
}

有什么想法吗？

---

谢谢。

在以上问题的所有解决方案之后，我给出了一个解决方案。输入文本并按Enter键，光标移动到文本的末尾

试着

$("div").keypress(function (event) {

    if (event.which == '13') {

        var val = $(this).text();    

        $(this).text('');
        $(this).text(val);
        setCursorToEnd($(this).get(0))

        event.preventDefault();
    }
});
function setCursorToEnd(ele)
  {

    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(ele, 1);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
    ele.focus();
  }

---

我发现了一个类似的问题，这似乎难以置信地复杂

虽然有人要求一些东西，但我用， Zane Claes的回答，并按预期工作

$.fn.focusEnd = function() {
    $(this).focus();
    var tmp = $('<span />').appendTo($(this)),
        node = tmp.get(0),
        range = null,
        sel = null;

    if (document.selection) {
        range = document.body.createTextRange();
        range.moveToElementText(node);
        range.select();
    } else if (window.getSelection) {
        range = document.createRange();
        range.selectNode(node);
        sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    }
    tmp.remove();
    return this;
}

$.fn.focusEnd=函数（）{
$（this.focus（）；
var tmp=$（''）.appendTo（$（this）），
node=tmp.get（0），
范围=空，
sel=null；
if（文档选择）{
range=document.body.createTextRange（）；
range.moveToElementText（节点）；
range.select（）；
}else if（window.getSelection）{
range=document.createRange（）；
范围。选择节点（node）；
sel=window.getSelection（）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
tmp.remove（）；
归还这个；
}

似乎所有引用的帖子都回答了你的问题？它们是相关的，它们只适用于

输入

或

文本框

标记，而不适用于

div

标记

contenteditable=“true”

谢谢，事实上，我在回答这个问题之前已经尝试过这段代码，并且有一个错误

Uncaught NotFoundError:尝试在
范围
中引用一个不存在的上下文中的节点。事实上，是的，并且没有看到它聚焦或光标的位置。是否按了enter按钮？。您需要按enter按钮。无论如何，此代码不适用于我的项目。现在我将自己发布备选答案。