Получить координаты фокуса клавиатуры на текстовой области или ввода

Question

Я не уверен, что | называется клавиатурным курсором. В любом случае у меня есть элемент управления вводом, и я хотел бы получить координаты, где | является.

Другими словами, если в моем теге ввода указан текст:

hello world | bla bla

тогда я хотел бы получить координаты курсора клавиатуры. сделав предположение, что оно выглядит как 80 пикселей вправо и 5 пикселей вниз.

Я знаю, как определить положение курсора, и затем я могу оценить местоположение, посчитав количество символов, но это ненадежно, поскольку некоторые буквы шире, чем другие. Другими словами, я смогу сказать, что курсор находится в позиции 12, используя эту технику .

Answer 1

Точное значение можно указать только в том случае, если вы используете моноширинные шрифты, а затем умножаете количество видимых символов на ширину используемого в данный момент шрифта.

Answer 2

Вы можете создать другой элемент (или другой контейнер с display: inline) с тем же содержимым, что и текст слева от курсора (text.value.substr (0, text.getCaretPosition ()). После элемента #fakeText добавьте еще один. Затем убедитесь, что все стили CSS для #fakeText такие же, как и для вашего ввода текста / области текста, кроме display: inline.

Наконец, измерьте положение #fakeCaret относительно левого верхнего угла #fakeText. Этот метод является единственным, который я знаю, который предоставляет координаты x и y для шрифтов переменной ширины.

Мы используем этот подход в nk.pl, чтобы расположить автозаполнение чуть ниже каретки.