X

JavaScript: Курсор в конец contenteditable элемента

Нашел, сниппет кода, по установке курсора в начало/конец элемента с включенным contenteditable. Задача, на первый взгляд простая, но имеет массу подводных камней. Поэтому, пока нашел рабочее решение, его надо сохранить. Код под катом..

Источник: ответ на stackoverflow

function createCaretPlacer(atStart) { // https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser
    return function(el) {
        el.focus();
        if (typeof window.getSelection != "undefined"
                && typeof document.createRange != "undefined") {
            var range = document.createRange();
            range.selectNodeContents(el);
            range.collapse(atStart);
            var sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (typeof document.body.createTextRange != "undefined") {
            var textRange = document.body.createTextRange();
            textRange.moveToElementText(el);
            textRange.collapse(atStart);
            textRange.select();
        }
    };
}

var placeCaretAtStart = createCaretPlacer(true);
var placeCaretAtEnd = createCaretPlacer(false);

использовать так:

<!doctype html>
<head>
<meta charset="UTF-8">
<title>Caret position in contenteditable element example</title>
<style>
body {background-color:#eee; color:black;}
div#edit[>
Тот же пример в jsfiddle: https://jsfiddle.net/orlov0562/jn9938vg/

Теги для поиска: contenteditable, caret, caretpos, js, javascript

Категории: JavaScript