Используя Typescript (или Javascript), мне нужно динамически создать и расположить узел DOM непосредственно под кареткой (мигающий курсор), пока пользователь находится в текстовом поле, текстовой области или contenteditable div.
Я получилcontenteditable div-часть для работы с чем-то вроде этого:
const range = document.getSelection().getRangeAt(0);
const rect = range.getBoundingClientRect();
const left: number = rect.left;
const top: number = rect.top + rect.height;
myElement.style.position = 'absolute';
myElement.style.top = `${top}px`;
myElement.style.left = `{left}px`;
Это работает как шарм.Проблема в том, что document.getSelection не дает мне выбор, который я хочу в текстовом поле или текстовой области.В своем исследовании я сталкивался со свойствами selectionStart и selectionEnd, но они не дают экранные координаты каретки, а это то, что мне нужно для динамического позиционирования myElement.
.мой вопрос может быть упрощен до: как я могу получить координаты каретки (или, точнее, ограничительный прямоугольник выделенного текста) в текстовом поле или текстовой области?