Установите курсор в конец contenteditable div

Я пытаюсь установить курсор в конец тега next / prev contenteditable, если текущий тег пуст, но когда я устанавливаю фокус, он добавляет фокус к началу текста, а не к концу. Перепробовал почти все решения на SO, но ни один, казалось, не работал на меня. Вот простой код, который я пытаюсь

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 

$('#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();
  }
3 5
javascript jquery html5 contenteditable

3 ответа:

Вы используете jQuery и получаете элемент из jQuery. Вы должны преобразовать его в собственный элемент DOM (с помощью функции jQuery-get), чтобы использовать функцию setCurserToEnd:

Ваш метод-вызов: 

setCursorToEnd(this.prev());

Рабочее решение: 

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

Смотрите обновленную скрипку: http://jsfiddle.net/dvH5r/4/

11

Вы были довольно близки, единственная проблема заключается в том, что 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;
}
2

Желательно, чтобы вы использовали plugijCaret , поскольку браузеры сильно отличаются в этом. Например, вы можете получить свою текущую позицию в поле с помощью

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