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

Question

I have the following HTML:

<form> <table border="1"> <tr> <td>Traveler name:</td> <td> <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/> </td> </tr> <tr> <td>Traveler E-mail:</td> <td> <input type="email" id="traveleremail"/> </td> </tr> </table> </form> 

I want placeholder val to be fully visible at all times, but this is not the case:

I tried to add this CSS:

 input[placeholder] { font-size: 0.6em; } 

... but although this reduces the font size remarkably, the text is truncated:

I tried adding to CSS like this:

 input[placeholder] { font-size: 0.6em; width: 500; } 

... but he does nothing to expand / expand the area of ​​the placeholder text in the input text (the input text is wide enough to hold the reduced text, but it still shrinks to a too small area inside itself).

How can I do that?

Answer 1

Original answer is July 2015

How about doing something like that? I used jQuery to demonstrate this. If you want it to be more “accurate” in terms of the width of the text, you can look at a way to get the width of the text and then set the width in jquery CSS for the value returned by the function that gets the width of the text (in this case, you most likely you’ll have to create an element, set its html to the placeholder content, get the width of the text, 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 making changes to the input fields is not black and white. each goes through the input elements. Then the code checks if the input is empty, if there is one, reduces the font size (to 10 pixels when I hard-coded it), otherwise it sets the default value (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 name:</td> <td> <input type="text" id="travelername" placeholder="Last Name, First Name, Middle Initial"/> </td> </tr> <tr> <td>Traveler E-mail:</td> <td> <input type="email" id="traveleremail"/> </td> </tr> </table> </form> 

If you want, you can decrease or increase the interval for the setInterval function so that it can work faster or slower (keep in mind performance and different computational speeds).

---

---

EDIT - May 2017

When I saw that this question was viewed more than a thousand times, I felt that I had to update my answer in order to be a little more useful and less confident in manual input.

The code below works as follows:

• Create your CSS style for both the input fields and their associated clones (this logic can be customized to your needs, but for simplicity's sake I gave all the clones of the input elements the same class)
• Iterates over all input elements and creates a clone
• Gets the width of the clone and compares its width with the width of the input element, decreasing the font-size at each iteration with step
• When the clone width is less than or equal to the width of the input element, we remove the clone element and set the font-size input.
• After user input inside the input element, we discard our changes to font-size

Note. . When we “undo” our changes in the input element, we actually remove the inline property. Any styles for these elements should be done in CSS (or you will have to try to find a way around this, for example, create a hidden element with an identifier, access it, pull the style and apply it back to the input element).

When testing the code below, I personally found that step 0.1 was sufficient and that a smaller value (say 0.01) affected performance. However, you can play with this value however you want.

 // Step is used to reduce font-size by value X var step = 0.1; setInterval(function() { // Loop over input elements $('input').each(function() { // Only change font-size if input value is empty (font-size should only affect placeholder) if ($(this).val() === '') { // Create clone $clone = $('<span></span>') .appendTo('body') .addClass('inputClone') .text($(this).attr('placeholder')); // Adjust font-size of clone var fontSize = $(this).css('font-size'); do { fontSize = parseFloat($clone.css('font-size')) - step; $clone.css({ 'font-size': fontSize }); } while ($clone.width() > $(this).width()); // Maintain input field size $(this).css({ "width": $(this).width() + "px", "height": $(this).height() + "px" }); // Change input font-size $(this).animate({ 'font-size': fontSize }); // Delete clone $clone.remove(); } else { // Default input field back to normal $(this) .finish() .clearQueue() .attr('style', function(i, style) { // Remove inline style for font-size return style.replace(/font-size[^;]+;?/g, ''); }); } }); }, 100); 

 input, .inputClone { font-family: "Arial", Helvetica, sans-serif; font-size: 14px; } 

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