9

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

代码

<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代码

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

3 回答 3

13

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

你的方法调用：

setCursorToEnd(this.prev());

工作解决方案：

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

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

于 2012-11-22T14:32:22.727 回答
3

你非常接近，唯一的问题是 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;
}
于 2012-11-22T16:04:50.293 回答
0

建议您使用插件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 });
于 2012-11-22T13:11:06.580 回答