TEXT INPUT BOX: how to display placeholder at the end of the typed text?

Question

So... I have a list of input boxes in my form... no labels, just placeholder texts.

lets say I have a text input field for an email...

and that the value of this text is ruby@rails.com

I would like to display: (email) after that string...

enter image description here

(only when input is blured, when input is focused, than the label shouldn't be there)...this I know how to do it...

the only problem is, that I don't know how to calculate the witdh of the actual text inside the input box, so I can display the label right beside it (another element positioned absolutely of course)

Any ideas?

========================================================== edit

so, I am using something like this in html markup

<input type="text" name="my_field" value="" data-fixed-placeholder="(email)" placeholder="email">

and then I am using jQuery to check if data fixed-placeholder is present... and display it...

so something like this (just semantically... the code is obviously not like that)

$("[data-fixed-placeholder]").on("focus", function(e){
    //hide the fixed placeholder
}).on("blur", function(e){
    //show the palceholder
   //1. check if there is no text inside... then don't show it (the original placeholder is still visible)
   //2. if there is text, calculate how wide it is
   //3. wrap input box in div, make it position relative, append another div inside with the text from fixed-placeholder
   //4. position this text next to the actual text in the input box
});

Hope this helps you to help me better.

I think [this answer](http://stackoverflow.com/a/3395975/2786485) might help — GuiDocs, Oct 06 '13 at 14:42
That sounds like poor UX. What if the viewer is using a browser that doesn't support `placeholders`? — Paulie_D, Oct 06 '13 at 14:44
Is this anywhere near what you are looking for? http://jsfiddle.net/pfdYv/ — , Oct 06 '13 at 14:45
@VilleRouhiainen: wow, that's pretty cool, very very close, but still doesn't cover it - on input blur, (email) should appear (if there is a value inside) — DS_web_developer, Oct 06 '13 at 14:59
Can you explain me in more detail how and when "(email)" should be come visible? What is the default state in input, empty input? — , Oct 06 '13 at 16:09
The question does not describe what code is actually used, just “I know how to do it”. You should disclose minimal code showing what you are doing, since this essentially affects how it could be modified. — Jukka K. Korpela, Oct 06 '13 at 17:08

TEXT INPUT BOX: how to display placeholder at the end of the typed text?

0 Answers0