Как разместить элемент под текстовым полем carret в javascript?

Question

У меня есть длинное текстовое поле, и что я хочу сделать, так это то, что когда пользователь набирает символ «@», список пользователей отображается точно так же, как типичное автозаполнение. Однако я хочу, чтобы список пользователей появлялся под символом «@», который мог быть от 20 до 30 символов с начала текстового поля.

Я нашел много автоматических плагинов jQuery, но ни один из них не позиционирует список ниже текущей позиции каретки.

Я могу получить позицию текстового поля, используя $('#textfield').position(), и я могу получить позицию каретки с помощью something like this, но она получает индекс символа от текстового значения, а не по позиции пикселя.

Как я могу получить текущую позицию каррета текстового поля относительно страницы в пикселях, чтобы расположить элемент под ним?

Answer 1

ретрансляцию на этом anwsear: Calculate text width with JavaScript

, что вы можете сделать, это есть DIV на экране, который виден: скрытый , то каждый раз, когда новый charecter был введен в текстовое поле изменить внутренний HTML в DIV

так что значение textbox и div innerhtml всегда будут синхронизироваться.

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

и вот это ...

и avcorse вы будете нуждаться в том, что DIV и текстовое поле будет иметь тот же шрифт ...

Answer 2

Этот плагин JQuery делает то, что вы после:

http://plugins.jquery.com/project/caretPosition

Я не проверял, но происходит в коде это выглядит, как он создает временный <span> с тем же содержанием, как ваш <textarea> (до курсора) и делает дикий assumpti Измерение шрифта, высоты строки, пробелов и обертывания слов при измерении.

Вы могли бы попытаться распространить его на:

1. Копирование шрифтов, высота строки, пробелов и слова стилей обертки от цели <textarea>

2. Скрыть временный <span>без влияет на измерение с помощью обертывание его в <div style="height: 0; overflow: hidden;"> или его абсолютное -9999px, -9999px

Answer 3

$(this).position().top ; 
$(this).position().left ; 
$(this).position().right ; etc... :-)