javascript 将光标设置到 contenteditable div 的末尾
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13513329/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set cursor to the end of contenteditable div
提问by Ross
I am trying to set the cursor to the end of next/prev contenteditable tag if the current one is empty, but when I set focus it adds focus to the begining of the text and not end Tried almost all solution on SO but none seemed to work for me. Here the simple code I am trying
如果当前为空，我试图将光标设置到下一个/上一个 contenteditable 标签的末尾，但是当我设置焦点时，它会将焦点添加到文本的开头而不是结尾 尝试了几乎所有解决方案，但似乎没有对我来说有效。这是我正在尝试的简单代码
HTML CODE
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();
}
回答by hereandnow78
you are using jQuery and getting the element from jQuery. You must convert it into a native DOM element (via the jQuery-get Function) to use the "setCurserToEnd"-Function:
您正在使用 jQuery 并从 jQuery 获取元素。您必须将其转换为原生 DOM 元素（通过 jQuery-get 函数）才能使用“setCurserToEnd”-Function：
your method-call:
你的方法调用：
setCursorToEnd(this.prev());
working solution:
工作解决方案：
setCursorToEnd($(this).prev().get(0));
see the updated fiddle: http://jsfiddle.net/dvH5r/4/
查看更新的小提琴：http: //jsfiddle.net/dvH5r/4/
回答by gkiely
You were pretty close, the only problem is that prev() returns a jQuery object, whereas you want to pass the actual DOM element to setCursorToEnd()
您非常接近，唯一的问题是 prev() 返回一个 jQuery 对象，而您想将实际的 DOM 元素传递给 setCursorToEnd()
Finished product: http://jsfiddle.net/B5GuC/
成品：http: //jsfiddle.net/B5GuC/
*Note: this works even if the above div element is empty. Vanilla js ftw.
*注意：即使上面的 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;
}
回答by toxicate20
Its advisable that you use the plugi jCaretas browsers are widely different in doing this. For example you can retrieve your current position in the field with
建议您使用插件jCaret，因为浏览器在执行此操作时有很大不同。例如，您可以使用以下命令检索您在该字段中的当前位置
$("#myTextInput").bind("keydown keypress mousemove", function() {
alert("Current position: " + $(this).caret().start);
});
You could then set the position by using (not tested it though)
然后您可以使用（虽然没有测试过）来设置位置
var endPos = $(this).caret().end;
$("input:text.hola").caret({start:endPos ,end:endPos });
