Как вернуть абсолютные пиксельные координаты конца строки при вводе текста?

Question

Я хотел бы иметь возможность динамически вставлять div в конце строки в текстовом вводе.

Например, если у меня есть текстовый ввод ...

MyInput: <input type="text" name="myInput" value="" />

... а в браузере кто-то печатает ...

MyInput:  Here is some sample input

Я хотел бы создать div сразу после ввода слова.

Кто-нибудь знает, как получить абсолютные пиксельные координаты конца строки при вводе текста?

Спасибо!

Answer 1

Я бы попытался создать встроенный элемент с тем же текстом, что и для ввода, затем вычислить ширину этого элемента и использовать ширину в качестве вашей "левой" координаты для div.

, например:

<input type="text" value="Here is some sample input" />
<span id="clonedInput" style="visibility:hidden">Here is some sample input</span>

Ваша функция для проверки ширины и обновления текста диапазона может быть нажата при нажатии.Я бы увидел наибольший успех при использовании этого метода, если бы вы применили те же стили CSS к диапазону, что и для ввода (насколько это относится к семейству шрифтов / pt)

Answer 2

Мне не нравятся такие ответы, но:

А вы хотите, чтобы он работал кросс-браузерным и кроссплатформенным, верно? IE, Chrome, Firefox, Safari; Windows, Linux, Mac ... У меня очень сильное подозрение, что мы еще не там. Когда вы попадаете в поля ввода, вы попадаете в встроенные элементы управления (например, в IE), что переносит вас в кроличью нору установленных шрифтов, улучшений доступности и ...

Если только случай использования не является чрезмерным, или кто-то не укажет на функцию, о которой я не знаю (и буду очень рад узнать о ней), я бы рекомендовал подходить к этому пользовательскому интерфейсу под другим углом.