Search code examples
csshtmlplaceholder

How to set an input width to match the placeholder text width


Example http://dabblet.com/gist/5859946

If you have a long placeholder, the input by default does not display wide enough to show all the placeholder text.

e.g.

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

Without setting a fixed width, and preferably no javascript, can you set the input to show all the placeholder text?


Solution

  • This can be done only via javascript by setting the size = placeholder length:

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

    Here is a code that dose that for all the inputs: http://jsfiddle.net/KU5kN/