如何在输入字段中找到最后一个字母的绝对或相对 position？

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.

Answer 4

The only way I konw how to do that is to calculate the width of a letter then multiply it by the number of letter in your input.

Or

in a display:none div create a input width the maxlength attribute to the number of character in the current input. Then get the width of it.

Answer 5

1. set font size to input
2. make screenshot of input with text and see how much px used for 1 symbol (average)
3. count symblos * average width of 1 + input left padding = what you want:) easy solution

Answer 6

I'm not really sure of the question but in my opinion you could do something like:

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

Now you could prepend the no of white spaces equal to the length in your target div.

Answer 7

Inspired by tybro's answer, I came up with this, which solves a problem in your question. If the textbox is a fixed length, what happens if the last letter is not visible at all? What co-ordinate should be reported then? Anyway, this gets around it by expanding the textbox indefinitely.

// 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 of is when does keypress fire if it's before the content has changed, that's a problem. You could get round it by introducing a timeout or probably theres an even better solution. Unfortunately the keyup event doesn't seem to work on contentEditable things (in Firefox 5 anyway).

Hope this helps.