How to return absolute pixel coordinates of the end of a string in a text input?

Question

I would like to be able to dynamically insert a div at the end of a string in a text input.

For example, if I have a text input...

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

...and in their browser someone types...

MyInput:  Here is some sample input

I would like to generate the div immediately after the word input.

Does anyone know how to get the absolute pixel coordinates of the tail end of a string in a text input?

Thanks!

Answer 1

I don't like answers like this, but:

And you want it to work cross-browser and cross-platform, right? IE, Chrome, Firefox, Safari; Windows, Linux, Mac... I have a very strong suspicion we're not there yet. When you get into input boxes, you get into natively-rendered controls (on IE, for instance), which takes you down the rabbit hole of installed fonts and accessibility enhancements and...

Unless the use case really is overwhelming, or someone points to the feature I don't know about (and will be very happy to learn of), I'd recommend approaching this UI from a different angle.

Answer 2

I would try creating an inline element with the same text as the input, then calculating the width of that element and using the width as your 'left' coordinate for the div.

for example:

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

Your function to test width and update the span text could be onkeypress. I would see the most success with this method if you applied the same css styles to the span as the input (as far as font family/pt)