Увеличивать textarea при необходимости

07 февраля 2022, 19:10

Как увеличивать textarea, когда текста становится больше, чем можно увидеть в блоке? Это можно сделать на css? Если знаете решение на js, напишите, не принципиально на css
Мне также подойдёт абсолютно любая конструкция, куда можно вводить текст и блок будет увеличиваться

textarea { 
  resize: none; 
  min-height: 50px; 
  font-size: 20px; 
  overflow-y: hidden; 
  outline: none; 
}

<textarea class="add__text" placeholder="Описание"></textarea>

Answer 1

Увы, такое нельзя провернуть на CSS.

Как вариант использовать блок, которые будет повторять размеры, отступы, стиль текста и т.п. и содержать в себе тот же текст, а потом, за счёт изменения его размера, увеличивать и размер textarea.

Не очень, но пример: (Используется jQuery)

let ghost = $('#ghost'); 
 
$('textarea').on('keypress change', function(){ 
  let text = $(this).val(); 
  ghost.text(text); 
   
  let ghostHeight = ghost.height(); 
  $(this).height(ghostHeight); 
   
  console.clear(); 
  console.info(`Высота textarea == ${Math.ceil(ghostHeight*100)/100}px`); 
});

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); 
 
body { 
  font-family: 'Roboto', sans-serif; 
  font-size: 14px; 
  line-height: 1.45; 
} 
 
textarea, #ghost { 
  display: block; 
  width: 200px; 
  min-height: 50px; 
  overflow: hidden; 
  font: inherit; 
  padding: 5px; 
  box-sizing: border-box; 
  word-break: break-word; 
} 
 
textarea { 
  border: 1px solid #aaa; 
  border-radius: 5px; 
  background: transparent; 
  color: #333; 
  resize: none; 
  transition: height .05s linear; 
} 
 
#ghost { 
  display: none; 
  position: absolute; 
  left: -1000px; 
  z-index: -1; 
  border: 1px solid transparent; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
 
<textarea placeholder="Введите текст"></textarea> 
<div id="ghost"></div>

UPD

Нашёл подобный вопрос с готовым решением, тут можно сказать уже совсем готовый вариант.

Ссылка на ответ - Клик

Answer 2

Я использовал такой способ, отсюда:
Действия ресайза заключил в requestAnimationFrame и задал transition для height, для того, чтобы избежать дрыганья блока

let observe; 
let text = document.querySelector('.add__text'); 
 
if (window.attachEvent) { 
    observe = function (element, event, handler) { 
        element.attachEvent('on'+event, handler); 
    }; 
} else { 
    observe = function (element, event, handler) { 
        element.addEventListener(event, handler, false); 
    }; 
} 
 
function init() { 
    function resize () { 
        text.style.height = 'auto'; 
        text.style.height = text.scrollHeight+'px'; 
    } 
 
    function delayedResize() { 
        requestAnimationFrame(function() { 
            resize(); 
        }); 
 
    } 
    observe(text, 'change',  resize); 
    observe(text, 'cut',     delayedResize); 
    observe(text, 'paste',   delayedResize); 
    observe(text, 'drop',    delayedResize); 
    observe(text, 'keydown', delayedResize); 
 
    text.focus(); 
    text.select(); 
    resize(); 
} 
 
init();

textarea { 
  min-height: 100px; 
  overflow: hidden; 
  transition: height .2s linear; 
  resize: none; 
  font-size: 40px; 
  max-width: 200px; 
}

<textarea class="add__text" placeholder="Описание"></textarea>

Answer 3

Вот еще есть один интересный вариант:

(function($) { 
  $.fn.autoResize = function(options) { 
    var settings = $.extend({ 
      onResize: function() {}, 
      animate: true, 
      animateDuration: 150, 
      animateCallback: function() {}, 
      extraSpace: 20, 
      limit: 1000 
    }, options); 
    this.filter('textarea').each(function() { 
      var textarea = $(this).css({ 
          resize: 'none', 
          'overflow-y': 'hidden' 
        }), 
        origHeight = textarea.height(), 
        clone = (function() { 
          var props = ['height', 'width', 'lineHeight', 'textDecoration', 'letterSpacing'], 
            propOb = {}; 
          $.each(props, function(i, prop) { 
            propOb[prop] = textarea.css(prop); 
          }); 
          return textarea.clone().removeAttr('id').removeAttr('name').css({ 
            position: 'absolute', 
            top: 0, 
            left: -9999 
          }).css(propOb).attr('tabIndex', '-1').insertBefore(textarea); 
        })(), 
        lastScrollTop = null, 
        updateSize = function() { 
          clone.height(0).val($(this).val()).scrollTop(10000); 
          var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace, 
            toChange = $(this).add(clone); 
          if (lastScrollTop === scrollTop) { 
            return; 
          } 
          lastScrollTop = scrollTop; 
          if (scrollTop >= settings.limit) { 
            $(this).css('overflow-y', ''); 
            return; 
          } 
          settings.onResize.call(this); 
          settings.animate && textarea.css('display') === 'block' ? 
            toChange.stop().animate({ 
              height: scrollTop 
            }, settings.animateDuration, settings.animateCallback) : 
            toChange.height(scrollTop); 
        }; 
      textarea 
        .unbind('.dynSiz') 
        .bind('keyup.dynSiz', updateSize) 
        .bind('keydown.dynSiz', updateSize) 
        .bind('change.dynSiz', updateSize); 
    }); 
    return this; 
  }; 
  $(function() { 
    $('textarea').autoResize({ 
      extraSpace: 0 
    }); 
  }) 
})(jQuery);

textarea { 
  width: 50%; 
  font-size: 0.938em; 
  background: #fff; 
  color: #111; 
  border: 1px solid #ccc; 
  outline: none; 
} 
 
.form_input textarea { 
  overflow: auto; 
  height: 50px; 
  max-height: auto; 
  padding: 10px; 
} 
 
.form_input textarea:hover, 
.form_input textarea:focus { 
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 0 5px 1px #f1f1f1; 
} 
 
.form_input>textarea~.f_focus { 
  content: ""; 
  display: block; 
  position: absolute; 
  left: 50%; 
  width: 0%; 
  height: 2px; 
  background-color: #006faf; 
  transition: 0.4s; 
} 
 
.form_input>textarea~.f_focus { 
  bottom: 0; 
} 
 
.form_input>textarea:focus~.f_input { 
  left: 0; 
  width: 100%; 
  transition: 0.4s; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="form_input"><textarea class="f_input" placeholder="Описание"></textarea></div>