将光标设置到可编辑div的末尾

Question

我试图在当前 contenteditable 标签为空时将光标设置到下一个/上一个 contenteditable 标签的结尾，但是当我设置焦点时，它会将焦点添加到文本的开头而不是结尾。我已经尝试了 StackOverflow 上几乎所有的解决方案，但似乎都对我无效。这是我正在尝试的简单代码。 HTML 代码

<div id = 'main'>
<div id = 'n1' contenteditable=true> Content one</div>
<div id = 'n2' contenteditable=true> Content 2</div>
<div id = 'n3' contenteditable=true> Content 3</div>
<div id = 'n4' contenteditable=true> Content 4</div>

JavaScript 代码

$('#main div').keydown(function(){
if(!$(this).text().trim()){
    $(this).prev().focus();
   //setCursorToEnd(this.prev())
    }
});


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();
  }

- Ross

---

这个问题已经被回答了很多次。请查看此帖子：https://dev59.com/2XNA5IYBdhLWcg3wBo5m#3866442 - hereandnow78

请找到以下代码片段链接：http://jsfiddle.net/dvH5r/3/ 请看一下，我有做错什么吗？ - Ross

Answer 1

您正在使用jQuery，并从jQuery中获取元素。您必须将其转换为本机DOM元素（通过jQuery-get函数），才能使用"setCurserToEnd"函数：

您的方法调用：

setCursorToEnd(this.prev());

解决方法：

setCursorToEnd($(this).prev().get(0));

查看更新后的示例：http://jsfiddle.net/dvH5r/4/

- hereandnow78

---

你好。在你的JSFiddle演示中，为什么我不能向一个空的div添加文本？它总是指向它前面的一个div。 - Lynnell Neri

Answer 2

你几乎做到了，唯一的问题是prev()返回的是一个jQuery对象，而你需要将实际的DOM元素传递给setCursorToEnd()

最终产品：http://jsfiddle.net/B5GuC/ *注意：即使上述div元素为空，这也能正常工作。原生JS赢了。

$('#main div').keydown(function(){
    if(!$(this).text().trim()){
        $(this).prev().focus();
        setCursorToEnd(getPrevSib(this));
    }
});

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

function getPrevSib(n){
    //gets prev sibling excl whitespace || text nodes
    var x=n.previousSibling;
    while (x && x.nodeType!=1){
          x=x.previousSibling;
    }
    return x;
}

- gkiely

Answer 3

建议您使用插件jCaret，因为不同的浏览器在此方面的处理方式差异很大。例如，您可以使用以下代码获取字段中的当前位置：

$("#myTextInput").bind("keydown keypress mousemove", function() {
  alert("Current position: " + $(this).caret().start);
});

你可以使用以下代码设置位置（尚未测试）

var endPos = $(this).caret().end;
$("input:text.hola").caret({start:endPos ,end:endPos });

- toxicate20

---

很酷，有一个插件可以做到这一点。如果没有其他办法的话，这将是我的最后选择。因为我不想添加太多代码。 - Ross

jCaret 对此无效。它专为文本输入框和文本区域设计，不适用于 contenteditable 元素。 - Tim Down