Растягивать поле ввода HTML вместе с дополнительным вводом?

Question

Я использую jQuery на этом сайте, который имеет форму ввода. Мне бы хотелось, чтобы одно конкретное поле стало длиннее (ширина), когда пользователь вводит данные, а пространство заканчивается.

Как рассчитать, когда мне В действительности необходимо увеличить продолжительность ввода (type="text")? То, что работает для одного браузера, может работать не для всех браузеров.

Это что-то, что не может быть рассчитано, поэтому все делают это на основе проб и ошибок в каждом браузере? Нужно ли прибегать к этому и настраивать значения растяжения с помощью .keyup () проверяет значение? .. EG ..

$(".stretchInput").keyup( function(event) {
   var someValueAdjustedByTrialAndError = 30;
   var stretchPastLength = someValueAdjustedByTrialAndError;
   var stretchBy = 5;
   var baseWidth = 100;
   if ($(this).val().length > stretchPastLength ) {
      $(this).css('width',(baseWidth + ($(this).val().length - stretchPastLength ) * stretchBy ) + 'px');
   } else {
      $(this).css('width','');
   }
});

Answer 1

[ОБНОВЛЕНО для обнаружения возврата назад]

Поместите скрытый элемент <span> на страницу, и в событии keyup вашего поля <input> вы можете отразить входное значение в вашем диапазоне.Обновите ширину поля ввода в соответствии с вашим диапазоном.

HTML:

<span style="display:none"></span>
<input type="text" style="width:100px"; />

Обратите внимание на значение min-width на входном элементе, который используется для предотвращения уменьшения ширины ниже определенного значения.

JQuery:

$('input').keyup(function() {
    var $span = $('span');
    var $this = $(this);
    $span.text($this.val()); 
    $this.width($span.width());
});

Answer 2

Решение для TextAreas

Описание

Звучит так, будто вы хотите автоматически растущую текстовую область , как на Facebook.Если так зачем изобретать велосипед ?Я рекомендую вам использовать замечательные Elasting jQuery Plugin.

Elastic, чтобы ваши текстовые области росли и сжимались, чтобы соответствовать их содержанию.Это было вдохновлено автоматически растущим текстовым пространством на Facebook.Основное различие между Elastic и его конкурентами заключается в его весе.

Дополнительная информация

• jsFiddle Демонстрация
• jQueryПлагин Elastic

Решение для текстовых входов

Здесь мое решение для input элементов.

Проблема в том, что ширина символа не равномерно на каждом шрифте.

Если вы выберете курьером в качестве шрифта, вы можете сделать его идеальным.

Образец

HTML

<input class="stretchInput" style="font-family: courier"/>

jQuery

var initialWidth = $(".stretchInput").width();
$(".stretchInput").keyup( function(event) {
   var charWidth = 8.5;
   var width = $(this).val().length*charWidth;
   if ($(this).width() < width)
   {
       $(this).width(width);
   } else {
       $(this).width(initialWidth );
   }
});

Проверьте мой jsFiddle