css - プレースホルダーのテキスト幅に合わせて入力幅を設定する方法

Question

長いプレースホルダーがある場合、デフォルトでは、入力はすべてのプレースホルダーテキストを表示するのに十分な幅で表示されません。

例えば

<input placeholder="Please enter your name, address and shoe size">

固定幅を設定せず、できれば JavaScript を設定せずに、すべてのプレースホルダーテキストを表示するように入力を設定できますか?

score 43 · Accepted Answer

これは、サイズ = プレースホルダーの長さを設定することにより、javascript を介してのみ行うことができます。

input.setAttribute('size',input.getAttribute('placeholder').length);

これは、すべての入力に対してそれを行うコードです: http://jsfiddle.net/KU5kN/

score 10 · Accepted Answer

誰かがこれを jQuery で使用したい場合に備えて、そのコードは以下になります。また、placeholder受け入れられた回答に属性が存在しない場合、エラーが発生します。これは、以下の jQuery の例でも同様に処理されます。

$("input[placeholder]").each(function () {
        $(this).attr('size', $(this).attr('placeholder').length);
    });

4 に答える 4