Проблема с jQuery и автоматическим изменением размера textarea

Question

У меня есть функция jQuery TextAreaExpander, но у меня с ней небольшая проблема.

Когда текстовое поле очень велико, удаление текста из нижней части его с помощью кнопок backspace или delete приводит к тому, что фокус перемещается в верхнюю часть текстового поля, и поэтому курсор перемещается с экрана. Это очень затрудняет редактирование больших разделов текста.

Как получить эту функцию для автоматического изменения размера текстового поля, но без перескакивания и скрытия курсора в этой ситуации?

(function($) { 
    // jQuery plugin definition 
    $.fn.TextAreaExpander = function(minHeight, maxHeight) { 
     var hCheck = !($.browser.msie || $.browser.opera); 
     // resize a textarea 
     function ResizeTextarea(e) { 
      // event or initialize element? 
      e = e.target || e; 
      // find content length and box width 
      var vlen = e.value.length, ewidth = e.offsetWidth; 
      if (vlen != e.valLength || ewidth != e.boxWidth) { 
       if (hCheck && (vlen < e.valLength || ewidth != e.boxWidth)) e.style.height = '0px'; 
       var h = Math.max(e.expandMin, Math.min(e.scrollHeight, e.expandMax)); 
       e.style.overflow = (e.scrollHeight > h ? 'auto' : 'hidden'); 
       e.style.height = h + 'px'; 
       e.valLength = vlen; 
       e.boxWidth = ewidth; 
      } 
      return true; 
     }; 
     // initialize 
     this.each(function() { 
      // is a textarea? 
      if (this.nodeName.toLowerCase() != 'textarea') return; 
      // set height restrictions 
      var p = this.className.match(/expand(\d+)\-*(\d+)*/i); 
      this.expandMin = minHeight || (p ? parseInt('0'+p[1], 10) : 0); 
      this.expandMax = maxHeight || (p ? parseInt('0'+p[2], 10) : 99999); 
      // initial resize 
      ResizeTextarea(this); 
      // zero vertical padding and add events 
      if (!this.Initialized) { 
       this.Initialized = true; 
       $(this).css('padding-top', 0).css('padding-bottom', 0); 
       $(this).bind('keyup', ResizeTextarea).bind('focus', ResizeTextarea); 
      } 
     }); 
     return this; 
    }; 
})(jQuery); 
// initialize all expanding textareas 
jQuery(document).ready(function() { 
    jQuery('textarea[class*=expand]').TextAreaExpander(); 
}); 

Вы можете увидеть проблему здесь, удаляя текст из самой нижней части текстового поля: http://jsfiddle.net/BmwCe/1/

Спасибо!

Answer 1

Закончен поиск лучшей функции для использования вместо приведенной выше. Кажется, у него нет проблем с другими.

Вы можете найти подробную информацию об этом здесь: Auto resizing textarea link down jquery

Answer 2

МОГ

эту помощь?

Кто-нибудь считает контент приемлемым? Не нужно возиться с прокруткой, и единственный JS, который мне нравится в этом, - это если вы планируете сохранять данные на blur ... и, по-видимому, совместимы со всеми популярными браузерами: http://caniuse.com/#feat=contenteditable

Просто запишите, как это выглядит текстовое поле, и оно автоматизирует ... Сделайте свою минимальную высоту и высоту строки предпочтительной высотой текста и располагайте на ней.

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

http://jsfiddle.net/gbutiri/v31o8xfo/

<style> 
.autoheight { 
    min-height: 16px; 
    font-size: 16px; 
    margin: 0; 
    padding: 10px; 
    font-family: Arial; 
    line-height: 16px; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    overflow: hidden; 
    resize: none; 
    border: 1px solid #ccc; 
    outline: none; 
    width: 200px; 
} 
</style> 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script> 
$(document).on('blur','.autoheight',function(e) { 
    var $this = $(this); 
    // The text is here. Do whatever you want with it. 
    console.log($this.html()); 
}); 

</script> 
<div class="autoheight contenteditable" contenteditable="true">Mickey <b>Mouse</b></div>