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

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

30.07.2017 0 comments » Views: 2,299

Курсор в тексте

Нашел, сниппет кода, по установке курсора в начало/конец элемента с включенным 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);

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[contenteditable="true"] {
        padding:5px;
        outline: 1px solid silver;
        background-color: white;
    }
    </style>
</head>
<body>
    <div id="edit">Кликни на меня и <strong>посмотри где курсор</strong></div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        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);

        $('#edit')
        .click(function(e){
            if ($(e.currentTarget).attr('contenteditable') === 'true') return;
            $(e.currentTarget).attr('contenteditable', 'true');
            placeCaretAtEnd(e.currentTarget);
        })
        .blur(function(e){
           $(e.currentTarget).attr('contenteditable', 'false');
        })
        ;
    </script>
</body>
</html>

<!doctype html>

<head>

<title>Caret position in contenteditable element example</title>

<style>

body {background-color:#eee; color:black;}

div#edit[contenteditable="true"] {

padding:5px;

outline: 1px solid silver;

background-color: white;

}

</style>

</head>

<body>

<div id="edit">Кликни на меня и <strong>посмотри где курсор</strong></div>

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);

$('#edit')

.click(function(e){

if ($(e.currentTarget).attr('contenteditable') === 'true') return;

$(e.currentTarget).attr('contenteditable', 'true');

placeCaretAtEnd(e.currentTarget);

})

.blur(function(e){

$(e.currentTarget).attr('contenteditable', 'false');

})

;

</script>

</body>

</html>

Тот же пример в jsfiddle: https://jsfiddle.net/orlov0562/jn9938vg/

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

Author: Vitaly Orlov | Rating: 4/5 | Tags: caret , caretpos , contenteditable , javascript , js

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

Leave a Reply Cancel reply