How to find absolute or relative position of last letter inside an input field?

Question

Maybe this is a strange question. Please, check Bellow you will understand.

Empty input type text, width=200px :

[____________________________]

Filled input type text, width=200px :

[abcdefg_____________________]

If input left is 0 how to find the absolute or relative position where the g letter is???

When user enters some text I want to display under last letter a simple div...

Answer 1

The text size hacks are OK, but you could alternatively use a visiblity: hidden span that moves your info div. HTML snippet follows:

<div><input type="text" value="hgello!!" onkeydown="document.getElementById('spacer').innerHTML = this.value;" /></div>
<div><span id="spacer" style="visibility: hidden;"></span>Character</div>

This way you can rely on the browser rendering the same font in roughly the same way into a span.

Answer 2

I can only think of one way to reliably do this, and it's quite dirty.

1) Use a content editable div floated left: 2) surround that div with another with a width of 200, border, and onlick sets focus to the editable div 3) put the div you want to show after the last letter after the editable div, also floated left

Result: http://jsfiddle.net/tybro0103/zMezP/1/

Click on the box and start typing. The green box will move along with the cursor position.

In order to use this as a text field in a form you'll need to make a hidden input field. On form submit set the hidden field's value to editable div's inner html.

Answer 3

There is no built in "textWidth" param, sadly. However, a hack that will work pretty well: you can count the characters, guess at their width, and set your div "left" param equal to the character count * width (and make sure its absolutely positioned). something like:

var characterWidth = 6.8; //have to guess at this until it works...
var targetLocation = document.getElementById('yourInput').value.length * characterWidth;
document.getElementById('yourDiv').style.left = targetLocation + "px";

Run this script on a timer, every half second or so (or animate to the target location with jquery) and you should be in business.

Hope that helps.

As noted - this will only work if the font is monospaced and the user doesn't modify font size at all.