Dynamic input resizing

Question

I'm just wondering how you dynamically resize input as you type into it?

I would like to use jQuery if possible, and I would prefer it to be a small script than a bulky plugin.

Please let me know Matt Muller

Answer 1

Here's a quick (untested) solution

$('input[type="text"]').keyup(function(){
  $(this).attr({width: 'auto', size: $(this).val().length});
});

Answer 2

I have a jQuery plugin on GitHub: https://github.com/MartinF/jQuery.Autosize.Input

This is approximately 1.6 kb, reduced.

Here you can see a live example: http://jsfiddle.net/mJMpw/6/

Example:

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' />

input[type="data-autosize-input"] {
  width: 90px;
  min-width: 90px;
  max-width: 300px;
  transition: width 0.25s;    
}

css min/max-width , .

/ json -autosize-input .

, jQuery

$("selector").autosizeInput();

Answer 3

I found this easy. This is for text areas

JQuery plugin: 'autoResize

Full version: ~ 4k

Minified: ~ 1k