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

Question

Perhaps this is a strange question. Please check Bellow for what you understand.

Empty text input type, width = 200px:

[____________________________] 

The text of the filled input type, width = 200px:

 [abcdefg_____________________] 

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

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

Answer 1

The hands of the text size are fine, but you can also use visibility: a hidden range that moves your info div. The following is a snippet of HTML:

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

Thus, you can rely on a browser displaying the same font in approximately the same way in between.

Answer 2

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

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

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

Click on the field and start typing. The green frame moves with the cursor position.

To use this as a text field on a form, you need to create a hidden input field. In the submit form, the value of the hidden field for the editable div of the internal html is set.

Answer 3

There is no built-in parameter "textWidth", unfortunately. Nevertheless, a hack that will work very well: you can count the characters, guess their width and set your “left” pair of divs equal to the width of the character * (and make sure that it is absolutely positioned). sort of:

 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 the target location using jquery) and you should be in business.

Hope this helps.

As noted, this will only work if the font is monospaced and the user does not change the font size at all.

Answer 4

The only way I'm going to do this is to calculate the width of the letter, and then multiply it by the number of letters at your input.

or

on display: none div does not create the input width of the maxlength attribute for the number of characters in the current input. Then get its width.

Answer 5

• set the font size for input
• take a screenshot with text and see how many pixels are used for 1 character (medium)
• count symblos * average width 1 + input left pad = what you want :) simple solution

Answer 6

I am not sure about this question, but in my opinion you can do something like:

 var len = 0; $(document).ready(function(){ len = $('#input').val().length; } 

Now you can add the number of white spaces equal to the length in your target div.

Answer 7

Inspired by the tiber answer, I came up with this that solves the problem in your question. If the text field is a fixed length, what happens if the last letter is not visible at all? What coordination should be reported then? Anyway, this wraps around, expanding the text field endlessly.

 // markup <div id="textbox"> <span id="edit" contentEditable></span> <span id="end"></span> </div> <div id="report">x:? , y:?</div> // css #textbox { border: solid black 1px; min-height: 1em; white-space: nowrap; } // javascript $(function() { $('#textbox').click(function() { $('#edit').focus(); }); $('#edit').keypress(function() { var endoff = $('#end').offset(); $('#report').html('x:' + endoff.left + ' , y:' + endoff.top); }); }); 

The only thing I'm not sure is when keypress fires, if it is before the content has changed, this is a problem. You can get around this by introducing a timeout or perhaps the best solution. Unfortunately, the keyup event doesn't seem to work in contentEditable things (anyway, Firefox 5).

Hope this helps.