将光标设置为contenteditable div的结尾

我试图将光标设置为next / prev contenteditable标记的末尾，如果当前的标记为空，但是当我设置焦点时，它会将焦点添加到文本的开头而不是结束尝试几乎所有解决方案都在SO上但似乎没有为我工作。 这是我正在尝试的简单代码

HTML代码

 
 Content one
 
 Content 2
 
 Content 3
 
 Content 4 

JS代码

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

Answer 1

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

你的方法调用：

 setCursorToEnd(this.prev()); 

工作方案：

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

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

Answer 2

你非常接近，唯一的问题是prev（）返回一个jQuery对象，而你想将实际的DOM元素传递给setCursorToEnd（）

成品： http ： //jsfiddle.net/B5GuC/

*注意：即使上面的div元素为空，这也有效。 香草js ftw。

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

Answer 3

建议你使用plugi 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 });