javascript - HTMLのテキストボックスのコンテンツと一緒にプレースホルダーテキストを移動するにはどうすればよいですか？

Question

これが私のテキストボックスだとします。

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

また、ユーザーは内部にパーセンテージを入力することになっていますが、%記号はなく、数字のみを入力します（たとえば、67％の67）。ただし、これはパーセンテージを挿入するテキストボックスであることを覚えておいてください。

では、プレースホルダーをテキストと一緒に移動して、常にテキストの後に削除できないようにするにはどうすればよいですか？

そして、事実を間違えない限り、どこかでそれを見たのを覚えています。

Answer 1

これを行う方法は、追加の要素を入力要素に重ね、ユーザーの入力に合わせて重ねた要素を移動させることです。

しかし、Twitter のブートストラップで示されているように、要素をアドオンとして入力フィールドに追加すると、より良い UX エクスペリエンスが得られると思います。「フォーム コントロールの拡張」設定を参照してください。

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

Answer 2

入力をシミュレートし、javascript を使用して実際の入力の幅を変更できます。（秘訣は、必要な幅をキャッチするために目に見えない要素を使用することです）

JQuery の使用例: http://jsfiddle.net/Vu7hN/

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