Auto-scaling input[type=text] to width of value?

Question

Is there a way to scale the width of an <input type="text"> to the width of the actual value?

input {    display: block;    margin: 20px;    width: auto;  }

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />    <input type="text" value="me too" />

Answer 1

You can do this the easy way by setting the size attribute to the length of the input contents:

function resizeInput() {     $(this).attr('size', $(this).val().length); }  $('input[type="text"]')     // event handler     .keyup(resizeInput)     // resize on page load     .each(resizeInput); 

See: http://jsfiddle.net/nrabinowitz/NvynC/

This seems to add some padding on the right that I suspect is browser dependent. If you wanted it to be really tight to the input, you could use a technique like the one I describe in this related answer, using jQuery to calculate the pixel size of your text.

Answer 2

A SIMPLE BUT PIXEL PERFECT SOLUTION

I have seen several ways to do this but calculating the width of fonts isn't always 100% accurate, it's just an estimate.

I managed to create a pixel perfect way of adjusting the input width by having a hidden placeholder to measure from.

---

jQuery (Recommended)

$(function() {   $('#hide').text($('#txt').val());   $('#txt').width($('#hide').width()); }).on('input', function() {   $('#hide').text($('#txt').val());   $('#txt').width($('#hide').width()); });

body, #txt, #hide {   font: inherit;   margin: 0;   padding: 0; }  #txt {   border: none;   color: #888;   min-width: 10px; }  #txt:focus-visible {   outline: none; }  #hide {   display: none;   white-space: pre; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <p>Lorem ipsum   <span id="hide"></span><input id="txt" type="text" value="type here ..."> egestas arcu. </p>

---

Pure JavaScript

I was unable to determine how jQuery calculates the width of hidden elements so a slight tweak to css was required to accomodate this solution.

const hide = document.getElementById('hide'); const txt = document.getElementById('txt'); resize(); txt.addEventListener("input", resize);  function resize() {   hide.textContent = txt.value;   txt.style.width = hide.offsetWidth + "px"; }

body, #txt, #hide {   font: inherit;   margin: 0;   padding: 0; }  #txt {   border: none;   color: #888;   min-width: 10px; }  #txt:focus-visible {   outline: none; }  #hide {   position: absolute;   height: 0;   overflow: hidden;   white-space: pre; }

<p>Lorem ipsum   <span id="hide"></span><input id="txt" type="text" value="type here ..."> egestas arcu. </p>