Курсор в конец contenteditable div JS

Question

У меня есть contenteditable div, мне хочется чтобы ссылки автоматически оборачивались в тег <a>.

Я сделал это с помощью regex'ов, но после обновления содержимого div'a с помощью метода innetHTML курсор сбивается в начало текста.

Как мне это исправить?

Answer 1

При взаимодействии с контентом элемента напрямую, c помощью метода innerHTML Вы полностью переписываете его содержание.

Как результат этой операции позиция каретки contenteditable элемента возвращается к исходной. Для того что бы это поправить Вам потребуешься управлять ее местоположением самостоятельно.

Это достаточно просто сделать с помощью методов createRange и getSelection:

const moveCaretToEnd = targer => {
    const range = document.createRange()
    const selection = window.getSelection()
    range.selectNodeContents(target)
    range.collapse(false)
    selection.removeAllRanges()
    selection.addRange(range)
    target.focus()
    range.detach() 
}

moveCaretToEnd(yourContenteditableElement)

БЛОГ НА HUSL

Курсор в конец contenteditable div JS

Ответы (1 шт):