JQuery растет и сокращается textarea

Question

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

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

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

Answer 1

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

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

Answer 2

 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(); 
      }); 
     });