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

Question

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?

Answer 1

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/

Answer 2

Just in case someone wants to use this with jQuery, that code would be below. Also, if the placeholder attribute doesn't exist in the accepted answer, you'll get errors, which is taken care of as well in the jQuery example below.

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