Есть ли плагин jQuery autogrow для текстовых полей?

у меня есть плагин jQuery на GitHub:https://github.com/MartinF/jQuery.Autosize.Input

Он использует тот же подход, что и ответ Джеймса, но имеет некоторые изменения, упомянутые в комментариях.

Вы можете увидеть живой пример здесь: http://jsfiddle.net/mJMpw/6/

пример:

<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 для атрибута data-autosize-input элемента input.

конечно, вы также можете просто инициализировать его с помощью jQuery

$("selector").autosizeInput();

хороший плагин, спасибо! Я изменил две вещи, которые, казалось, работали лучше в моем проекте.

1. Я изменил тег тестера на DIV, чтобы избежать неожиданного вызова метода или доступа к свойству.'в IE8 (даже если ваша демо-версия работает в IE8. Была ли особая причина для использования пользовательского тега HTML?
2. после оператора bind в конце кода я добавил вызов check (), чтобы изменить размер текстового поля сразу после загрузки страница, в случае, если текстовое поле уже имеет содержимое в нем при запуске.

надеюсь, что это помогает.

просто хотел поделиться небольшим улучшением с отличным плагином Джеймса. Добавьте этот код в объявление CSS для элемента tester для учета text-indent:

textIndent: 0

без него в некоторых ситуациях элемент tester может непреднамеренно наследовать текстовый отступ из другого места, тем самым отбрасывая размер ввода.

Как и JP, я также хотел изменить размер ввода до нужного размера с самого начала, что я сделал немного по-другому, путем цепочки "trigger ('keyup') " для вызова метода autoGrowInput, например:

$('#contact_form').autoGrowInput({comfortZone: 7, minWidth: 10, maxWidth: 200}).trigger('keyup');

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

Я также заменил

$(this).bind('keyup keydown blur update', check)

до

$(this).bind('keyup blur update', check).bind('keydown', function() {
    setTimeout(check);
});

чтобы изменить размер поля сразу после его повторного отображения браузером. Это избавит поле от некоторой болтовни.

Я создал плагин для ввода введите текст, который воссоздает это поведение. Он имеет некоторые другие уникальные особенности. Вы можете увидеть пример просмотреть документация плагина. @james answer имеет некоторые проблемы с вставкой большого текста во вход. Чтобы исправить это, я внес некоторые изменения в его код. Вот это демо, например.

(function($){        
    $.fn.autoGrowInput = function(o) {

        o = $.extend({
            maxWidth: 200,
            minWidth: 1,
            comfortZone: 1,
          width: 1
        }, o);

        this.filter('input:text').each(function(){

            var minWidth = o.minWidth || $(this).width(),
                maxWidth = o.maxWidth,
                val = '',
                input = $(this),
                testSubject = $('<tester/>').css({
                    position: 'absolute',
                    top: -9999,
                    left: -9999,
                    width: 'auto',
                    fontSize: input.css('fontSize'),
                    fontFamily: input.css('fontFamily'),
                    fontWeight: input.css('fontWeight'),
                    letterSpacing: input.css('letterSpacing'),
                    whiteSpace: 'nowrap'
                }),
                check = function() {

                    if (val === (val = input.val())) {return;}

                    // Enter new content into testSubject
                    var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,'&nbsp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
                    testSubject.html(escaped);

                    // Calculate new width + whether to change
                    var testerWidth = testSubject.width(),
                    newWidth = testerWidth + o.comfortZone,
                    currentWidth = input.width();

                   if (testerWidth < minWidth) {
                       newWidth = minWidth;
                   } else if (testerWidth > maxWidth) {
                       newWidth = maxWidth;
                   } 

                   input.width(newWidth + o.comfortZone);  
            };

            testSubject.insertAfter(input);

            $(this).bind('input', check);

        });

        return this;

    };

})(jQuery);

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

в приведенном ниже скрипте "#test " - это идентификатор текстового поля.

<script language="javascript" type="text/javascript">
$(document).ready(function(){
    $("#test").keyup(function(){
        if($("#test").attr("size") < $("#test").val().length){
            size = $("#test").val().length;
            $("#test").attr("size",size);
        }
    })
});
</script>

достаточно смешно в переполнении IE: видимый воспринимается очень серьезно. Вы можете достичь этого эффекта, применяя overflow: visible на ваших входных элементах. Не уверен, существуют ли подобные CSS-трюки для современных браузеров.

Awsome плагин Джеймс ! Спасибо. Я добавил предложение проверки в конце концов JP, хотя и очень эффективно .

также я добавил некоторые изменения с моей стороны. Я хотел установить размер для ввода максимального размера, если измененная ширина превысила maxWidth, поэтому я добавил:

else if (widthexceeds){
    input.width(o.maxWidth);
}

ниже проверки if для isValidWidthChange где widthexceeds = newWidth > o.maxWidth

Я создал плагин, который называется input-autogrow чтобы решить эту проблему для моего собственного проекта. Этот плагин был первоначально основан на ответе Джеймса, но был улучшен во многих отношениях.

https://github.com/westonganger/input-autogrow

input-autogrow - это плагин для автоматическим увеличением входов. Этот плагин отличается от других, потому что обычно целевые теги textarea, эта библиотека вместо этого ориентирована на входные теги. Требуется библиотека DOM, такая как jQuery, Zepto или любой, который поддерживает $.Плагины ФН.

вот некоторые примеры использования.

/* Makes elements readonly if they already have the readonly attribute */
$('input.autogrow').inputAutogrow();

/* Manually trigger update */
$('input.autogrow').trigger('autogrow');
/* or */
$('input.autogrow').trigger('change');

/* Custom Options */
$('input.autogrow').inputAutogrow({maxWidth: 500, minWidth: 25, trailingSpace: 10});

/* Remove autogrow from input */
$('input.autogrow').inputAutogrow('destroy');