Как найти местоположение курсора (X/Y, а не строку/столбец) в текстовом поле HTML?

Я хочу отобразить раскрывающийся список в <textarea>, чтобы помочь пользователю ввести некоторые вещи. Вы знаете это из текущих IDE как завершение кода. Когда вы начнете вводить что-то, всплывающее окно появится справа от текущего местоположения курсора/каретки, и вы можете перемещаться по нему с помощью клавиш со стрелками, чтобы завершить ввод текста.

Я знаю как получить позицию курсора в текстовой строке (т.е. индекс символа позиции курсора), но я не знаю, как получить X/Y координаты (что-то вроде offsetWidth и offsetHeight) курсора внутри элемента <textarea>, чтобы я мог расположить элемент списка. Возможно ли это в HTML/JavaScript и как это работает?

Ответы

Ответ 1

С редактируемым вводом html (в iframe, например CKeditor или Rich Text Editor или даже лучше: jsfiddle) вы можете вставить пустой элемент span в позицию каретки и получить позицию этого элемента, чтобы отобразить выпадающий список.

Это может показаться сложным, но я не могу придумать другого способа сделать это.

У него есть дополнительные возможности при использовании для редактора кода, вы можете кодировать текст и формат кода, например, jsfiddle, и, возможно, даже создавать какой-то код-автозаполнение для ключевых слов и т.д.