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

Question

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?

score 53 · Accepted Answer · answered Jun 25 '13 at 17:08

53

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/

answered Jun 25 '13 at 17:08

Avner Solomon

1,486
11
17

1

Not necessarily always exactly the right width, is useful and very terse. Thanks. – Dan Eastwell Jul 05 '13 at 10:39
I posted an answer below that is runs with jQuery that also avoids errors being thrown, if someone desires one as such – Brian Leishman Jan 12 '15 at 00:48
Unfortunately the results of this are very inconsistent across browsers. – sgb Apr 08 '16 at 09:10
is it still inconsistent? are there still no better ways to accomplish this? – oldboy Jul 19 '19 at 02:07
1

@BugWishperer . I think it's supported by all modern browsers BUT the 'size' attribute is not a fixed length by definition. if you open my jsfiddle in different brwosers (edge/chrome/ff) you will notice there is more or less whitespace after the last word. That's because of the way "size" works. Another way would be making an invisible div with the text of same font of the placeholder, taking the width of it dynamically and setting it to the input. – Avner Solomon Jul 27 '19 at 07:52

score 11 · Answer 2 · answered Jan 12 '15 at 00:47

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);
    });

score 8 · Answer 3 · answered Mar 31 '20 at 13:52

I went with Avner Solomon's solution, as proposed in the comments of one of the above sections.

You need a div element wrapping an input and another div element that contains your label:

<div class="input-container">
     <!-- this element is hidden from display and screen readers. -->
     <div class="input-hidden-label" 
          aria-hidden="true">
       Your placeholder text
     </div>

     <input class="input" 
            type="text" 
            placeholder="Your placeholder text"/>
</div>

Assuming the font styles for the input-hidden-label and the input are the same, you will see a line of text alongside the input. The text will be the same length as the input, give or take a few pixels.

You can then apply these styles:

.input-container {
  display: inline-block;
  margin-bottom: 2em;
}

.input {
  display: inline;
  width: 100%;
  font-size: 16px;
  font-family: Times;
}

.input-hidden-label {
  height: 0;
  visibility: hidden;
}

This hides the label by giving it height: 0, and removing visibility. But, the width remains. The div that contains the input and the label matches the width of its longest child. If you then set the input to width: 100%, it will match the parent width, which already matches the placeholder.

See this fiddle.

Caveats

This idea is not very accessible, nor is this solution. You should include a label for the input, and not rely on the placeholder itself as a label.

I don't understand your caveat, where you say "This idea is not very accessible, nor is this solution."? Seems like a good solution to me, and conveniently keeps the HTML/CSS separate from the JavaScript. — user3773048, Jun 05 '20 at 17:14
@user3773048 every element needs to have a label in order to be accessible. You shouldn't rely on a placeholder attribute in order to be WCAG compliant. — Adam McKenna, Jun 06 '20 at 08:49
Genius. I think the accessibility is fine as long as you have a label as well. — koga73, Jul 13 '20 at 19:23
Another reason that this is not accessible is because screen readers will read the input placeholder before reading the input value. I knew people who are blind, and they would definitely get confused if their screen reading software read out the input placeholder every time they used an input regardless of the inputs contents — John Miller, Jan 12 '23 at 00:19

score 1 · Answer 4 · answered Dec 30 '19 at 20:19

A workaround i thought of:

Make a span element with the same text as placeholder.
Measure width of the span element.
Set input to the width of the span element.
hide span element. display none will not work, use other method.

http://jsfiddle.net/Timar/cwLp3rbo/

var input = document.getElementById('input-1');

// measure width of same text as placeholder
var placeholder =  document.getElementById('input-1-placeholder');


input.style.width = placeholder.offsetWidth + "px"

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

4 Answers4

Linked