web-dev-qa-db-ja.com

プレースホルダーのテキスト幅に一致するように入力幅を設定する方法

例 http://dabblet.com/Gist/5859946

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

例えば.

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

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

csshtml5placeholder
35
Dan Eastwell

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

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

以下は、すべての入力にそれを適用するコードです。 http://jsfiddle.net/KU5kN/

29
Avner Solomon

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

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