JQuery выращивания и сокращения текстовой области

Question

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

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

Как вы (желательно с jquery) определяете, когда возврат каретки удален в текстовой области?

Answer 1

        var computedElement = window.getComputedStyle($(element)[0]),
        paddingTop = parseInt(computedElement.paddingTop),
        paddingBottom = parseInt(computedElement.paddingBottom),
        borderBottom = parseInt(computedElement.borderBottom),
        borderTop = parseInt(computedElement.borderTop),
        lineHeight = parseInt(computedElement.lineHeight),
        outerHeight = paddingBottom + paddingTop + borderTop + borderBottom;

        var resize = function() {
          //height:auto resets the height to row=1 to get the scrollHeight without white space
          $(element).css('height', 'auto');
          $(element).height($(element)[0].scrollHeight - outerHeight);
        }

        //first resize to set the existing text
        $timeout(function(){
          if($(element).val().length) {
            resize();
          }
        });

        //resize on keyup and keydown 
        $(element).on('keydown keyup', function() {
          $timeout(function(){
            resize();
          });
        });

Answer 2

Попробуйте плагин TextArea Resizer:

http://plugins.jquery.com/project/TextAreaResizer