Иногда мы хотим получить позицию индекса вставки элемента contentEditable с помощью JavaScript.
В этой статье мы рассмотрим, как получить позицию индекса вставки для элемента contentEditable с помощью JavaScript.
Используйте метод document.getSelector
Мы можем использовать document.getSelector, чтобы получить выбор.
И затем мы можем использовать это, чтобы получить длину выделения, чтобы получить позицию курсора.
Например, мы можем написать следующий HTML:
<div contenteditable>some text here <i>italic text here</i> some other text here <b>bold text here</b> end of text</div>
Затем мы можем написать следующий код JavaScript, чтобы получить местоположение курсора, написав:
const cursorPosition = () => {
const sel = document.getSelection();
sel.modify("extend", "backward", "paragraphboundary");
const pos = sel.toString().length;
if (sel.anchorNode != undefined) sel.collapseToEnd();
return pos;
}
const elm = document.querySelector('[contenteditable]');
const printCaretPosition = () => {
console.log(cursorPosition(), 'length:', elm.textContent.trim().length)
}
elm.addEventListener('click', printCaretPosition)
elm.addEventListener('keydown', printCaretPosition)
У нас есть функция cursorPosition, которая вызывает метод documebnt.getSelection для получения текста внутри div.
Затем мы вызываем modify, чтобы настроить текущий выбор.
Мы перемещаем 'backward' на 'paragraphboundary' .
Затем мы получаем длину выделения после преобразования его в строку.
Затем мы сворачиваем выделение и возвращаем pos, чтобы вернуть позицию курсора.
Затем мы получаем div с querySelector.
А затем мы создаем printCaretPosition для печати позиции курсора.
Наконец, мы вызываем addEventListener, чтобы мы вызывали printCaretPosition, когда мы щелкаем или печатаем на div.
Заключение
Мы можем использовать document.getSelector, чтобы получить выбор.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.
