Resize input to fit its content

Question

I do not care for a specific technology, it could be JS, CSS or even some unstandard and evil html attributes. I just want the input to get bigger if user types over the right border.

Answer 1

Let the browser do the calculating of the width by using a div with contenteditable set to true.

<div class="pseudo-input" contenteditable="true">Resizes to my content!</div>

There should be no issues with browser support http://caniuse.com/#feat=contenteditable

Answer 2

You can also create div element, copy your input style to it and use it's dimensions to resize input. (Chosen multiple uses this solution).

var input = $('input'),
    dummy = $('<div style="position:absolute; left: -1000%;">').appendTo('body');

['font-size', 'font-style', 'font-weight', 'font-family',
 'line-height', 'text-transform', 'letter-spacing'].forEach(function(index) {
    dummy.css(index, input.css(index));
});

input.on('input', function() {
   dummy.html(this.value);
   input.width(dummy.width());
});

UPD: better to use pre instead div to follow spaces size.