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?

Heidiheidie

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/

Jamiejamieson

Not necessarily always exactly the right width, is useful and very terse. Thanks. – Heidiheidie

I posted an answer below that is runs with jQuery that also avoids errors being thrown, if someone desires one as such – Ceilometer

Unfortunately the results of this are very inconsistent across browsers. – Librarianship

is it still inconsistent? are there still no better ways to accomplish this? – Keldon

@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. – Jamiejamieson

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

Ceilometer

Answer 3

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.

Delouse

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. – Wundt

@Wundt 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. – Delouse

Genius. I think the accessibility is fine as long as you have a label as well. – Helainehelali

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 – Serrato

Just add label and it's good enough – Poacher

Answer 4

As of March 2024 we finally have a native solution based on field-sizing for chromium based browsers.

Usage:

.input {
  field-sizing: content;
}

Bissextile

Answer 5

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"

Tanagra

I believe the span could be made with document.createElement - just don't append the span to the DOM – Brahear