How to Adjust the Width of the Input Field Based on the Placeholder Text

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

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/

Adjust width of input field to its input

It sounds like your expectation is that the style be applied dynamically to the width of the textbox based on the contents of the textbox. If so you will need some js to run on textbox contents changing, something like this:

<input id="txt" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Note: this solution only works when every character is exactly 8px wide. You could use the CSS-Unit "ch" (characters) which represents the width of the character "0" in the chosen font. You can read about it here.

Dynamically Adjust HTML Text Input Width to Content

Use onkeypress even

see this example :http://jsfiddle.net/kevalbhatt18/yug04jau/7/

<input id="txt" placeholder="name" class="form" type="text" onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"></span>

And for placeholder on load use jquery and apply placeholder
size in to input

$('input').css('width',((input.getAttribute('placeholder').length + 1) * 8) + 'px');

Even you can use id instead of input this is just an example so that I
used $(input)

And in css provide min-width

.form {
    border: 1px solid black;
    text-align: center;
    outline: none;
    min-width:4px;
}

EDIT:

If you remove all text from input box then it will take placeholder value using focusout

Example: http://jsfiddle.net/kevalbhatt18/yug04jau/8/

$("input").focusout(function(){

    if(this.value.length>0){
        this.style.width = ((this.value.length + 1) * 8) + 'px';
    }else{
      this.style.width = ((this.getAttribute('placeholder').length + 1) * 8) + 'px';
    }

});

How can I get placeholder text to shrink to fit within its text input element and show its entire value?

Original Reply - July 2015

What about doing something like this? I used jQuery to demonstrate it. If you want it to be more 'exact' in terms of width of the text, you can look at a way to get the text's width and then setting the width in jquery's CSS to the value returned from the function that gets the text's width (in which case you will likely have to create an element, set its html to the placeholder's content, get the text's width and then delete the element). In any case, the code below is what I would do to accomplish what you are asking.

I decided to use setInterval because getting changes to input fields are not black and white. each loops through the input elements. The code then checks to see if input is empty, if it is, is downscales the font-size (to 10px as I hardcoded it), otherwise it sets it to the default (let's say you want 14px, it gets 14px).

setInterval(function() {    $('input').each(function(){        if($(this).val() === ''){            $(this).css({                "width":$(this).width()+"px",                "height":$(this).height()+"px"            });            if(parseFloat($(this).css('font-size'))<=14){                $(this).animate({                    "font-size":10+"px"                });            }        }        else {            $(this).finish().clearQueue().css({                "font-size":14+"px"            });        }    });}, 100);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><form>    <table border="1">        <tr>            <td>Traveler's name:</td>            <td>                <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/>            </td>        </tr>        <tr>            <td>Traveler's E-mail:</td>            <td>                <input type="email" id="traveleremail"/>            </td>        </tr>    </table></form>