将光标设置到 contenteditable div 的末尾

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

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>

JS CODE

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

您正在使用 jQuery 并从 jQuery 获取元素。您必须将其转换为原生 DOM 元素（通过 jQuery-get 函数）才能使用“setCurserToEnd”函数：

你的方法调用：

setCursorToEnd(this.prev());

工作解决方案：

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

查看更新的小提琴：http://jsfiddle.net/dvH5r/4/ http://jsfiddle.net/dvH5r/4/