Input Autosize

Чтобы поле Input раздвигалось по мере того как в него вводят символы, воспользуемся jQuery. Шестой вариант выполнен на JavaScript.

jQuery:

$.fn.textWidth = function(_text, _font){//get width of text with font.  usage: $("div").textWidth();
        var fakeEl = $('<span>').hide().appendTo(document.body).text(_text || this.val() || this.text()).css('font', _font || this.css('font')),
            width = fakeEl.width();
        fakeEl.remove();
        return width;
    };

$.fn.autoresize = function(options){//resizes elements based on content size.  usage: $('input').autoresize({padding:10,minWidth:0,maxWidth:100});
  options = $.extend({padding:10,minWidth:0,maxWidth:10000}, options||{});
  $(this).on('input', function() {
    $(this).css('width', Math.min(options.maxWidth,Math.max(options.minWidth,$(this).textWidth() + options.padding)));
  }).trigger('input');
  return this;
}


$("input").autoresize({padding:20,minWidth:40,maxWidth:300});

CSS (для придания анимации):

input{
  transition:width 0.1s;
}

HTML:

<input value="i magically resize">
<br><br>
called with:
$("input").autoresize({padding:20,minWidth:40,maxWidth:300});

Вариант 2

jQuery:

$(function() {
    function adjust(elements, offset, min, max) {
        // initialize parameters
        offset = offset || 0;
        min    = min    || 0;
        max    = max    || Infinity;
        elements.each(function() {
            var element = $(this);
            // add element to measure pixel length of text
            var id = btoa(Math.floor(Math.random() * Math.pow(2, 64)));
            var tag = $('<span id="' + id + '">' + element.val() + '</span>').css({
                'display': 'none',
                'font-family': element.css('font-family'),
                'font-size': element.css('font-size'),
            }).appendTo('body');
            // adjust element width on keydown
            function update() {
                // give browser time to add current letter
                setTimeout(function() {
                    // prevent whitespace from being collapsed
                    tag.html(element.val().replace(/ /g, '&nbsp'));
                    // clamp length and prevent text from scrolling
                    var size = Math.max(min, Math.min(max, tag.width() + offset));
                    if (size < max)
                        element.scrollLeft(0);
                    // apply width to element
                    element.width(size);
                }, 0);
            };
            update();
            element.keydown(update);
        });
    }
    // apply to our element
    adjust($('.adjust'), 10, 100, 500);
});

CSS:

.adjust {
    transition: width .15s;
}

HTML:

<input class="adjust" value="Change this text and watch this field adjusting">

Вариант 3

jQuery:

var $input = $('.input'),
    $buffer = $('.input-buffer');

$input.on('input', function() {
    $buffer.text($input.val());
    $input.width($buffer.width());
});

CSS:

.input,
.input-buffer{
    font-family: Arial, Verdana, sans-serif;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.input{
    width: 100px;
    min-width: 100px;
}

.input-buffer{
    position: absolute;
    top: -1000px;
    left: -1000px;
    visibility: hidden;
    white-space: nowrap;
}

HTML:

<input type="text" class="input">
<div class="input-buffer"></div>

Вариант 4 (letter-spacing)

jQuery:

var $input = $('.input'),
    $buffer = $('.input-buffer');

$input.on('input', function() {
    $buffer.text($input.val());
    $input.width($buffer.width());
});

CSS:

.input,
.input-buffer{
    font-family: Arial, Verdana, sans-serif;
    font-size: 20px;
    letter-spacing: 0.5em;
}

.input{
    width: 100px;
    min-width: 100px;
}

.input-buffer{
    position: absolute;
    top: -1000px;
    left: -1000px;
    visibility: hidden;
    white-space: nowrap;
}

HTML:

<input type="text" class="input">
<div class="input-buffer"></div>

Вариант 5

jQuery:

function resizeInput() {

    //Firstly take the content or placeholder if content is missing.
    var content =
        $(this).val().length > 0 ? $(this).val() : $(this).prop("placeholder");

    //Create testing element with same content as input.
    var widthTester = $("<span>"+content+"</span>").hide();

    //Place testing element into DOM after input (so it inherits same formatting as input does).
    widthTester.insertAfter($(this));

    //Set inputs width; you may want to use outerWidth() or innerWidth()
    //depending whether you want to count padding and border or not.
    $(this).css("width",widthTester.width()+"px");

    //Remove the element from the DOM
    widthTester.remove();
 }

 $('.resizing-input').focusout(resizeInput).each(resizeInput);

В CSS указать min-width

Вариант 6

Pure JavaScript:

var input = document.querySelectorAll('.input'),
  buffer = [];
for (var i = 0; input.length > i; i++) {
  console.log(input[i].value);
  buffer[i] = document.createElement('div');
  buffer[i].className = "buffer";
  //вставляем скрытый div.buffer
  input[i].parentNode.insertBefore(buffer[i], input[i].nextSibling);

  input[i].oninput = function() {
    this.nextElementSibling.innerHTML = this.value;
    this.style.width = this.nextElementSibling.clientWidth + 'px';
  };
}

CSS:

.input,
.buffer {
  font-family: Arial, Verdana, sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
}

.input {
  border: none;
  min-width:200px;
}

.buffer {
  position: absolute;
  top: -1000px;
  left: -1000px;
  visibility: hidden;
  white-space: nowrap;
}

HTML:

<div>
  Ваше имя:
  <input type="text" class="input" placeholder="напиши здесь свое имя">
</div>
<div>
  Ваш e-mail:
  <input type="text" class="input" placeholder="напиши здесь свой e-mail">
</div>