Могу ли я найти позицию курсора в пикселях в ContentEditable?

Question

Я имею в виду нахождение позиции верхнего / левого пикселя курсора, а не смещения символа.

Причина, по которой я хочу это сделать, заключается в том, что я хочу показать маленькую подсказку-подобный div рядом с курсором (подумайте о новом плавающем поле форматирования MS Word), который следует за курсором при вводе или нажатии.Я могу использовать координаты мыши, если пользователь нажимает, но не уверен, как это сделать для набора текста.

Есть ли надежный способ?Если не для поиска верхней / левой позиции курсора, то альтернативой является просто найти верхнюю позицию для строки .

Пример кода не требуется на 100%, есликак метод работает и хорошо объяснен.

Answer 1

Это на самом деле не ответ, а понятия, о которых нужно подумать:

В contenteditable все состоит из узлов, как и все остальное в HTML, поэтому вы можете получить позицию узла, проблема в том, где вы находитесь в узле(если это текст, вы можете быть 100 символов внутри узла).Таким образом, вы должны сделать свои собственные односимвольные узлы.

Чтобы получить позицию, когда кто-то печатает, вам нужно захватить событие onkeypress, остановить пузырь распространения, взять символ, который он запрашивает, набить егов узле (может быть, промежуток аля "маркер"), а затем вставьте этот узел.Затем вы вычислите точную позицию этого промежутка / узла по смещению.

Возможно, вам придется удалить промежуток и заменить его только символом.

Также естьпроблема, с которой я столкнулся, когда вы связываетесь с всплывающими событиями, когда должна происходить прокрутка, каретка может выходить за пределы области просмотра.

Опционально, и это может быть немного лучшей идеей, чем возиться сраспространения, позволяют браузеру самостоятельно вставлять символ, затем сразу же вставлять символ юникода нулевой ширины (невидимый) в промежуток / узел до или после него и вместо этого вычислять его положение.Затем вытаскивайте маркеры либо на лету, либо когда они останавливают печать.

Да, это так грязно, извините.Если у кого-то есть способ получше, я весь в ушах.

Answer 2

попробуйте

var cursorY = window.getSelection().getRangeAt(0).getBoundingClientRect().top;

cursorY - позиция курсора Y в окне.

A Selection объект представляет диапазон текста, выделенный пользователь или текущая позиция каретки.

Selection.getRangeAt () возвращает объект диапазона, представляющий один из диапазоны, выбранные в настоящее время.