How to move placeholder text along with the content of a textbox in HTML?

Question

Suppose this is my textbox:

<input type="text" placeholder="%" />

And a user is supposed to enter a percentage inside, but without the % sign, only the numbers (eg 67 in 67%). But I want them to still remember that this is a text box in which you insert a percentage.

So how can I move the placeholder along with the text, make it unable to be deleted, always after the text?

And I do remember seeing it somewhere too, unless I got my facts wrong.

Answer 1

A way to do this would be to have an additional element overlaying the input element and moving the overlayed element as the user types.

But, I think a better UX experience would be to have the element as an add-on appended to the input field, as show in twitter bootstrap. See the "extending form controls" settings:

http://twitter.github.com/bootstrap/base-css.html#forms

Answer 2

You could simulate an input and change the width of the real input using javascript. (The trick is to use some invisible element to catch the needed width)

Exemple using JQuery: http://jsfiddle.net/Vu7hN/

$input.on('change keypress paste focus textInput input', function(){
    testWidth.text($input.val());
    $input.width(testWidth.width());
});