Вы используете более высокое значение текущего clientHeight и scrollHeight содержимого. Когда вы уменьшаете scrollHeight путем удаления содержимого, вычисляемая область не может уменьшаться, потому что clientHeight, ранее установленный style.height, удерживает ее открытой. Вместо этого вы можете взять max () scrollHeight и минимальное значение высоты, которое вы предварительно определили или рассчитали из textarea.rows.

В общем, вам, вероятно, не стоит полагаться на scrollHeight в элементах управления формой. Кроме того, что scrollHeight традиционно менее широко поддерживается, чем некоторые другие расширения IE, HTML / CSS ничего не говорит о том, как элементы управления формы реализованы внутри, и вам не гарантируется, что scrollHeight будет иметь что-то значимое. (Традиционно некоторые браузеры использовали для этой задачи виджеты ОС, что делало взаимодействие CSS и DOM на их внутреннем устройстве невозможным.) По крайней мере, понюхайте наличие scrollHeight / clientHeight, прежде чем пытаться включить эффект.

Другой возможный альтернативный подход, позволяющий избежать этой проблемы, если важно, чтобы он работал более широко, может заключаться в использовании скрытого блока div с той же шириной, что и текстовое поле, и с тем же шрифтом. При нажатии клавиши вы копируете текст из текстового поля в текстовый узел в скрытом div (не забывая заменить '\ n' разрывом строки и правильно экранировать '<' / '&', если вы используете innerHTML). Затем простое измерение offsetHeight div даст вам нужную высоту.

Я тестировал скрипт в обычных браузерах, и он не удался в Chrome и Safari. Это из-за постоянно обновляемой переменной scrollHeight.

Я применил скрипт DisgruntledGoat с помощью jQuery и добавил исправление хрома.

function fitToContent(/* JQuery */text, /* Number */maxHeight) {
    var adjustedHeight = text.height();
    var relative_error = parseInt(text.attr('relative_error'));
    if (!maxHeight || maxHeight > adjustedHeight) {
        adjustedHeight = Math.max(text[0].scrollHeight, adjustedHeight);
        if (maxHeight)
            adjustedHeight = Math.min(maxHeight, adjustedHeight);
        if ((adjustedHeight - relative_error) > text.height()) {
            text.css('height', (adjustedHeight - relative_error) + "px");
            // chrome fix
            if (text[0].scrollHeight != adjustedHeight) {
                var relative = text[0].scrollHeight - adjustedHeight;
                if (relative_error != relative) {
                    text.attr('relative_error', relative + relative_error);
                }
            }
        }
    }
}

function autoResizeText(/* Number */maxHeight) {
    var resize = function() {
        fitToContent($(this), maxHeight);
    };
    $("textarea").attr('relative_error', 0);
    $("textarea").each(resize);
    $("textarea").keyup(resize).keydown(resize);
}

Если scrollHeight можно доверять, то:

textarea.onkeyup=function() {
  this.style.height='';
  this.rows=this.value.split('\n').length;
  this.style.height=this.scrollHeight+'px';
}

$('textarea').bind('keyup change', function() {
    var $this = $(this), $offset = this.offsetHeight;
    $offset > $this.height() && $offset < 300 ?
        $this.css('height ', $offset)
            .attr('rows', $this.val().split('\n').length)
            .css({'height' : $this.attr('scrollHeight'),'overflow' : 'hidden'}) :
        $this.css('overflow','auto');
});

Это работает для меня (Firefox 3.6 / 4.0 и Chrome 10/11):

var observe;
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 () {
    var text = document.getElementById('text');
    function resize () {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight+'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize () {
        window.setTimeout(resize, 0);
    }
    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();
}

textarea {
    border: 0 none white;
    overflow: hidden;
    padding: 0;
    outline: none;
    background-color: #D0D0D0;
}

<body onload = "init();">
<textarea rows = "1" style = "height:1em;" id = "text"></textarea>
</body>

Если хотите, попробуйте на jsfiddle Он начинается с одной строки и увеличивается только на необходимое количество. Это нормально для одного textarea, но я хотел написать что-то, где у меня было бы много-много-много таких textarea (примерно столько, сколько обычно бывает строк в большом текстовом документе). В этом случае это действительно медленно. (В Firefox это безумно медленно.) Так что мне действительно нужен подход, использующий чистый CSS. Это было бы возможно с contenteditable, но я хочу, чтобы это был только открытый текст.

Немного исправлений. Отлично работает в Opera

  $('textarea').bind('keyup keypress', function() {
      $(this).height('');
      var brCount = this.value.split('\n').length;
      this.rows = brCount+1; //++ To remove twitching
      var areaH = this.scrollHeight,
          lineHeight = $(this).css('line-height').replace('px',''),
          calcRows = Math.floor(areaH/lineHeight);
      this.rows = calcRows;
  });

Я использовал следующий код для нескольких текстовых полей. Работает нормально в Chrome 12, Firefox 5 и IE 9, даже при удалении, вырезании и вставке действий, выполняемых в текстовых областях.

function attachAutoResizeEvents() {
  for (i = 1; i <= 4; i++) {
    var txtX = document.getElementById('txt' + i)
    var minH = txtX.style.height.substr(0, txtX.style.height.indexOf('px'))
    txtX.onchange = new Function("resize(this," + minH + ")")
    txtX.onkeyup = new Function("resize(this," + minH + ")")
    txtX.onchange(txtX, minH)
  }
}

function resize(txtX, minH) {
  txtX.style.height = 'auto' // required when delete, cut or paste is performed
  txtX.style.height = txtX.scrollHeight + 'px'
  if (txtX.scrollHeight <= minH)
    txtX.style.height = minH + 'px'
}
window.onload = attachAutoResizeEvents

textarea {
  border: 0 none;
  overflow: hidden;
  outline: none;
  background-color: #eee
}

<textarea style='height:100px;font-family:arial' id = "txt1"></textarea>
<textarea style='height:125px;font-family:arial' id = "txt2"></textarea>
<textarea style='height:150px;font-family:arial' id = "txt3"></textarea>
<textarea style='height:175px;font-family:arial' id = "txt4"></textarea>

решение jQuery настройте CSS в соответствии с вашими требованиями

css ...

div#container textarea {
    min-width: 270px;
    width: 270px;
    height: 22px;
    line-height: 24px;
    min-height: 22px;
    overflow-y: hidden; /* fixes scrollbar flash - kudos to @brettjonesdev */
    padding-top: 1.1em; /* fixes text jump on Enter keypress */
}

javascript ...

// auto adjust the height of
$('#container').delegate( 'textarea', 'keydown', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keydown();

ИЛИ альтернатива для jQuery 1.7 + ...

// auto adjust the height of
$('#container').on( 'keyup', 'textarea', function (){
    $(this).height( 0 );
    $(this).height( this.scrollHeight );
});
$('#container').find( 'textarea' ).keyup();

Я создал скрипку с минимальным стилем в качестве отправной точки для ваших экспериментов ... http://jsfiddle.net/53eAy/951/

Я могу установить размер TextArea в IE9 и Chrome с помощью следующей функции jQuery. Он привязывается к объектам textarea из селектора, определенного в функции $ (document) .ready ().

function autoResize(obj, size) {
    obj.keyup(function () {
        if ($(this).val().length > size-1) {
            $(this).val( function() {
                $(this).height(function() {
                    return this.scrollHeight + 13;
                });
                alert('The maximum comment length is '+size+' characters.');
                return $(this).val().substring(0, size-1);
            });
        }
        $(this).height(function() {
            if  ($(this).val() == '') {
                return 15;
            } else {
                $(this).height(15);
                return ($(this).attr('scrollHeight')-2);
            }
        });
    }).keyup();
}

В моей функции $ (document) .ready () у меня есть следующий вызов для всех моих вызовов textarea на этой странице.

$('textarea').each( function() {
        autoResize($(this), 250);
});

Где 250 - это ограничение на количество символов в моей текстовой области. Он будет увеличиваться настолько, насколько позволяет размер текста (в зависимости от количества символов и размера шрифта). Он также будет соответствующим образом сжимать вашу текстовую область, когда вы удаляете символы из текстового поля или если пользователь изначально вставляет слишком много текста.

Я знаю короткий и правильный способ реализовать это с помощью jquery. Никаких дополнительных скрытых div не требуется и работает в большинстве браузеров.

<script type = "text/javascript">$(function(){
$("textarea").live("keyup keydown",function(){
var h=$(this);
h.height(60).height(h[0].scrollHeight);//where 60 is minimum height of textarea
});});

</script>

<!DOCTYPE html>
<html>
<head>
    <meta charset = "UTF-8">
    <title>Textarea autoresize</title>
    <style>
    textarea {
        overflow: hidden;
    }
    </style>
    <script>
    function resizeTextarea(ev) {
        this.style.height = '24px';
        this.style.height = this.scrollHeight + 12 + 'px';
    }

    var te = document.querySelector('textarea');
    te.addEventListener('input', resizeTextarea);
    </script>
</head>
<body>
    <textarea></textarea>
</body>
</html>

Проверено в Firefox 14 и Chromium 18. Числа 24 и 12 произвольны, проверьте, что вам больше подходит.

Вы можете обойтись без тегов style и script, но это становится немного беспорядочным, imho (это старый стиль HTML + JS и не рекомендуется).

<textarea style = "overflow: hidden" onkeyup = "this.style.height='24px'; this.style.height = this.scrollHeight + 12 + 'px';"></textarea>

Обновлено: модернизированный код. Атрибут onkeyup изменен на addEventListener.
Обновлено: keydown работает лучше, чем keyup
Обновлено: объявить функцию перед использованием
Обновлено: ввод работает лучше, чем keydown (thnx @ WASD42 & @ MA-Maddin)

jsfiddle

Некоторые ответы здесь не учитывают заполнение.

Предполагая, что у вас есть maxHeight, о котором вы не хотите переходить, это сработало для меня:

    // obviously requires jQuery

    // element is the textarea DOM node

    var $el = $(element);
    // inner height is height + padding
    // outerHeight includes border (and possibly margins too?)
    var padding = $el.innerHeight() - $el.height();
    var originalHeight = $el.height();

    // XXX: Don't leave this hardcoded
    var maxHeight = 300;

    var adjust = function() {
        // reset it to the original height so that scrollHeight makes sense
        $el.height(originalHeight);

        // this is the desired height (adjusted to content size)
        var height = element.scrollHeight - padding;

        // If you don't want a maxHeight, you can ignore this
        height = Math.min(height, maxHeight);

        // Set the height to the new adjusted height
        $el.height(height);
    }

    // The input event only works on modern browsers
    element.addEventListener('input', adjust);

Вот что я сделал при использовании MVC HTML Helper для TextArea. У меня было довольно много элементов textarea, поэтому мне пришлось различать их с помощью Model Id.

 @Html.TextAreaFor(m => m.Text, 2, 1, new { id = "text" + Model.Id, onkeyup = "resizeTextBox(" + Model.Id + ");" })

и в скрипте добавил это:

   function resizeTextBox(ID) {            
        var text = document.getElementById('text' + ID);
        text.style.height = 'auto';
        text.style.height = text.scrollHeight + 'px';            
    }

Я тестировал его на IE10 и Firefox23

Есть несколько иной подход.

<div style = "position: relative">
  <pre style = "white-space: pre-wrap; word-wrap: break-word"></pre>
  <textarea style = "position: absolute; top: 0; left: 0; width: 100%; height: 100%"></textarea>
</div>

Идея состоит в том, чтобы скопировать текст из textarea в pre и позволить CSS убедиться, что они имеют одинаковый размер.

Преимущество состоит в том, что фреймворки предоставляют простые инструменты для перемещения текста, не касаясь каких-либо событий. А именно, в AngularJS вы должны добавить ng-model = "foo" ng-trim = "false" к textarea и ng-bind = "foo + '\n'" к pre. См. рабочий пример.

Просто убедитесь, что у pre такой же размер шрифта, как у textarea.

Если вам не нужна поддержка IE8, вы можете использовать событие input:

var resizingTextareas = [].slice.call(document.querySelectorAll('textarea[autoresize]'));

resizingTextareas.forEach(function(textarea) {
  textarea.addEventListener('input', autoresize, false);
});

function autoresize() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight+'px';
  this.scrollTop = this.scrollHeight;
  window.scrollTo(window.scrollLeft,(this.scrollTop+this.scrollHeight));
}

Теперь вам нужно только добавить немного CSS, и все готово:

textarea[autoresize] {
  display: block;
  overflow: hidden;
  resize: none;
}

Применение:

<textarea autoresize>Type here and I’ll resize.</textarea>

Вы можете узнать больше о том, как это работает в моем сообщении в блоге.

Еще более простой и понятный подход:

// adjust height of textarea.auto-height
$(document).on( 'keyup', 'textarea.auto-height', function (e){
    $(this).css('height', 'auto' ); // you can have this here or declared in CSS instead
    $(this).height( this.scrollHeight );
}).keyup();

// и CSS

textarea.auto-height {
    resize: vertical;
    max-height: 600px; /* set as you need it */
    height: auto;      /* can be set here of in JS */
    overflow-y: auto;
    word-wrap:break-word
}

Все, что нужно, - это добавить класс .auto-height к любому textarea, на который вы хотите настроить таргетинг.

Протестировано в FF, Chrome и Safari. Сообщите мне, если это не сработает для вас по какой-либо причине. Но это самый чистый и простой способ работы. И отлично работает! : D

авто размер

https://github.com/jackmoore/autosize

Просто работает, автономно, популярно (3.0k + GitHub stars по состоянию на октябрь 2018), доступно на cdnjs) и легковесно (~ 3.5k). Демо:

<textarea id = "autosize" style = "width:200px;">a
J   b
c</textarea>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.min.js"></script>
<script>autosize(document.querySelectorAll('#autosize'));</script>

Кстати, если вы используете редактор ACE, используйте maxLines: Infinity: Автоматически настраивать высоту содержимого в редакторе Ace Cloud 9

ПОЛНОЕ, ЕЩЕ ПРОСТОЕ РЕШЕНИЕ

Обновлен 2020-05-14(Улучшена поддержка браузером мобильных телефонов и планшетов)

Следующий код будет работать:

• При вводе с клавиатуры.
• Со вставленным текстом (щелкните правой кнопкой мыши & ctrl + v).
• С вырезанным текстом (щелкните правой кнопкой мыши & ctrl + x).
• С предварительно загруженным текстом.
• Со всем сайтом textarea (многострочные текстовые поля).
• С Fire Fox(проверено v31-67).
• С Хром(проверено v37-74).
• С IE(проверено v9-v11).
• С Край(проверено v14-v18).
• С IOS Safari.
• С Браузер Android.
• С помощью JavaScript строгий режим.
• Проверено ли w3c.
• И он оптимизирован и эффективен.

ВАРИАНТ 1 (С jQuery)

Эта опция требует jQuery, была протестирована и работает с 1.7.2 - 3.3.1

Простой(Добавьте этот код jquery в свой главный файл сценария и забудьте о нем.)

$("textarea").each(function () {
  this.setAttribute("style", "height:" + (this.scrollHeight) + "px;overflow-y:hidden;");
}).on("input", function () {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea placeholder = "Type, paste, cut text here...">PRELOADED TEXT.
This javascript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder = "Type, paste, cut text here..."></textarea>

Test on jsfiddle

ВАРИАНТ 2 (Чистый JavaScript)

Простой(Добавьте этот JavaScript в свой главный файл сценария и забудьте о нем.)

const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}

<textarea placeholder = "Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder = "Type, paste, cut text here..."></textarea>

Test on jsfiddle

ВАРИАНТ 3 (Расширение jQuery)

Полезно, если вы хотите применить дополнительную цепочку к текстовым областям, для которых требуется автоматический размер.

jQuery.fn.extend({
  autoHeight: function () {
    function autoHeight_(element) {
      return jQuery(element)
        .css({ "height": "auto", "overflow-y": "hidden" })
        .height(element.scrollHeight);
    }
    return this.each(function() {
      autoHeight_(this).on("input", function() {
        autoHeight_(this);
      });
    });
  }
});

Вызов с помощью $("textarea").autoHeight()

ОБНОВЛЕНИЕ ТЕКСТА С ПОМОЩЬЮ JAVASCRIPT

При внедрении содержимого в текстовое поле с помощью JavaScript добавьте следующий код для вызова функции в варианте 1.

$("textarea").trigger("input");

ПРЕДУСТАНОВЛЕННАЯ ВЫСОТА ТЕКСТА

Чтобы зафиксировать начальную высоту текстового поля, вам нужно будет добавить дополнительное условие:

const txHeight = 16;
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  if (tx[i].value == '') {
    tx[i].setAttribute("style", "height:" + txHeight + "px;overflow-y:hidden;");
  } else {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  }
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput(e) {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}

<textarea placeholder = "Type, paste, cut text here...">PRELOADED TEXT. This JavaScript should now add better support for IOS browsers and Android browsers.</textarea>
<textarea placeholder = "Type, paste, cut text here..."></textarea>

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

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

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

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

var _auto_value = '';
$(document).on('blur', '.autosave', function(e) {
  var $this = $(this);
  if ($this.text().trim() == '') {
    $this.html('');
  }

  // The text is here. Do whatever you want with it.
  $this.addClass('saving');

  if (_auto_value !== $this.html() || $this.hasClass('error')) {

    // below code is for example only.
    $.ajax({
      url: '/echo/json/?action=xyz_abc',
      data: 'data=' + $this.html(),
      type: 'post',
      datatype: 'json',
      success: function(d) {
        console.info(d);
        $this.removeClass('saving error').addClass('saved');
        var k = setTimeout(function() {
          $this.removeClass('saved error')
        }, 500);
      },
      error: function() {
        $this.removeClass('saving').addClass('error');
      }
    });
  } else {
    $this.removeClass('saving');
  }
}).on('focus mouseup', '.autosave', function() {
  var $this = $(this);
  if ($this.text().trim() == '') {
    $this.html('');
  }
  _auto_value = $this.html();
}).on('keyup', '.autosave', function(e) {
  var $this = $(this);
  if ($this.text().trim() == '') {
    $this.html('');
  }
});

body {
  background: #3A3E3F;
  font-family: Arial;
}

label {
  font-size: 11px;
  color: #ddd;
}

.autoheight {
  min-height: 16px;
  font-size: 16px;
  margin: 0;
  padding: 10px;
  font-family: Arial;
  line-height: 20px;
  box-sizing: border-box;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  overflow: hidden;
  display: block;
  resize: none;
  border: 0;
  outline: none;
  min-width: 200px;
  background: #ddd;
  max-height: 400px;
  overflow: auto;
}

.autoheight:hover {
  background: #eee;
}

.autoheight:focus {
  background: #fff;
}

.autosave {
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  transition: all .2s;
  position: relative;
  float: none;
}

.autoheight * {
  margin: 0;
  padding: 0;
}

.autosave.saving {
  background: #ff9;
}

.autosave.saved {
  background: #9f9;
}

.autosave.error {
  background: #f99;
}

.autosave:hover {
  background: #eee;
}

.autosave:focus {
  background: #fff;
}

[contenteditable=true]:empty:before {
  content: attr(placeholder);
  color: #999;
  position: relative;
  top: 0px;
  /*
    For IE only, do this:
    position: absolute;
    top: 10px;
    */
  cursor: text;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Your Name</label>
<div class = "autoheight autosave contenteditable" contenteditable = "true" placeholder = "Your Name"></div>

Я не знаю, упоминал ли кто-нибудь об этом, но в некоторых случаях можно изменить высоту с помощью атрибутов строк

textarea.setAttribute('rows',breaks);

Демо

Вы можете использовать этот код:

Гроб:

jQuery.fn.extend autoHeightTextarea: ->
  autoHeightTextarea_ = (element) ->
    jQuery(element).css(
      'height': 'auto'
      'overflow-y': 'hidden').height element.scrollHeight

  @each ->
    autoHeightTextarea_(@).on 'input', ->
      autoHeightTextarea_ @

$('textarea_class_or_id`').autoHeightTextarea()

Javascript

jQuery.fn.extend({
  autoHeightTextarea: function() {
    var autoHeightTextarea_;
    autoHeightTextarea_ = function(element) {
      return jQuery(element).css({
        'height': 'auto',
        'overflow-y': 'hidden'
      }).height(element.scrollHeight);
    };
    return this.each(function() {
      return autoHeightTextarea_(this).on('input', function() {
        return autoHeightTextarea_(this);
      });
    });
  }
});

$('textarea_class_or_id`').autoHeightTextarea();

Для тех, кто хочет, чтобы размер текстового поля автоматически изменялся как по ширине, так и по высоте:

HTML:

<textarea class='textbox'></textarea>
<div>
  <span class='tmp_textbox'></span>
</div>

CSS:

.textbox,
.tmp_textbox {
  font-family: 'Arial';
  font-size: 12px;
  resize: none;
  overflow:hidden;
}

.tmp_textbox {
  display: none;
}

jQuery:

$(function(){
  //alert($('.textbox').css('padding'))
  $('.textbox').on('keyup change', checkSize)
  $('.textbox').trigger('keyup')

  function checkSize(){
    var str = $(this).val().replace(/\r?\n/g, '<br/>');
    $('.tmp_textbox').html( str )
    console.info($(this).val())

    var strArr = str.split('<br/>')
    var row = strArr.length
    $('.textbox').attr('rows', row)
    $('.textbox').width( $('.tmp_textbox').width() + parseInt($('.textbox').css('padding')) * 2 + 10 )
  }
})

Codepen:

http://codepen.io/anon/pen/yNpvJJ

Ваше здоровье,

Лучшее решение (работает и коротко) для меня:

    $(document).on('input', 'textarea', function () {
        $(this).outerHeight(38).outerHeight(this.scrollHeight); // 38 or '1em' -min-height
    }); 

Он работает как шарм, не мигая при вставке (также с помощью мыши), вырезании, вводе и уменьшении до нужного размера.

Пожалуйста, взгляните на jsFiddle.

Решение jQuery состоит в том, чтобы установить высоту текстового поля на 'auto', проверить scrollHeight и затем адаптировать высоту текстового поля к этому каждый раз, когда текстовое поле изменяется (JSFiddle):

$('textarea').on( 'input', function(){
    $(this).height( 'auto' ).height( this.scrollHeight );
});

Если вы динамически добавляете текстовые поля (через AJAX или что-то еще), вы можете добавить это в свой $ (document) .ready, чтобы убедиться, что все текстовые поля с классом autoheight сохраняются на той же высоте, что и их содержимое:

$(document).on( 'input', 'textarea.autoheight', function() {
    $(this).height( 'auto' ).height( this.scrollHeight );
});

Протестировано и работает в Chrome, Firefox, Opera и IE. Также поддерживает вырезание и вставку, длинные слова и т. д.

Этот код работает для вставки, а также для удаления.

onKeyPressTextMessage = function(){
			var textArea = event.currentTarget;
    	textArea.style.height = 'auto';
    	textArea.style.height = textArea.scrollHeight + 'px';
};

<textarea onkeyup = "onKeyPressTextMessage(event)" name = "welcomeContentTmpl" id = "welcomeContent" onblur = "onblurWelcomeTitle(event)" rows = "2" cols = "40" maxlength = "320"></textarea>

Вот JSFiddle

Просто используйте <pre> </pre> с некоторыми стилями, например:

    pre {
        font-family: Arial, Helvetica, sans-serif;
        white-space: pre-wrap;
        word-wrap: break-word;
        font-size: 12px;
        line-height: 16px;
    }

Я рекомендую библиотеку javascript от http://javierjulio.github.io/textarea-autosize.

В комментариях добавьте пример кодового блока при использовании плагина:

<textarea class = "js-auto-size" rows = "1"></textarea>

<script src = "http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src = "jquery.textarea_autosize.min.js"></script>
<script>
$('textarea.js-auto-size').textareaAutoSize();
</script>

Минимальный необходимый CSS:

textarea {
  box-sizing: border-box;
  max-height: 160px; // optional but recommended
  min-height: 38px;
  overflow-x: hidden; // for Firefox (issue #5)
}

Вы можете использовать этот фрагмент кода для вычисления количества строк, необходимых для текстового поля:

textarea.rows = 1;
    if (textarea.scrollHeight > textarea.clientHeight)
      textarea.rows = textarea.scrollHeight / textarea.clientHeight;

Вычислите его на событиях input и window:resize, чтобы получить эффект автоматического изменения размера. Пример в Angular:

Код шаблона:

<textarea rows = "1" reAutoWrap></textarea>

auto-wrap.directive.ts

import { Directive, ElementRef, HostListener } from '@angular/core';

@Directive({
  selector: 'textarea[reAutoWrap]',
})
export class AutoWrapDirective {

  private readonly textarea: HTMLTextAreaElement;

  constructor(el: ElementRef) {
    this.textarea = el.nativeElement;
  }

  @HostListener('input') onInput() {
    this.resize();
  }

  @HostListener('window:resize') onChange() {
    this.resize();
  }

  private resize() {
    this.textarea.rows = 1;
    if (this.textarea.scrollHeight > this.textarea.clientHeight)
      this.textarea.rows = this.textarea.scrollHeight / this.textarea.clientHeight;
  }

}

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

Я делаю следующее, что также хорошо работает с max-height и rows для минимальной и максимальной высоты.

function adjust() {
  var style = this.currentStyle || window.getComputedStyle(this);
  var boxSizing = style.boxSizing === 'border-box'
      ? parseInt(style.borderBottomWidth, 10) +
        parseInt(style.borderTopWidth, 10)
      : 0;
  this.style.height = '';
  this.style.height = (this.scrollHeight + boxSizing) + 'px';
};

var textarea = document.getElementById("ta");
if ('onpropertychange' in textarea) { // IE
  textarea.onpropertychange = adjust;
} else if ('oninput' in textarea) {
  textarea.oninput = adjust;
}
setTimeout(adjust.bind(textarea));

textarea {
  resize: none;
  max-height: 150px;
  border: 1px solid #999;
  outline: none;
  font: 18px sans-serif;
  color: #333;
  width: 100%;
  padding: 8px 14px;
  box-sizing: border-box;
}

<textarea rows = "3" id = "ta">
Try adding several lines to this.
</textarea>

Для абсолютной полноты вам следует вызвать функцию adjust еще в нескольких случаях:

1. События изменения размера окна, если ширина textarea изменяется с изменением размера окна, или другие события, которые изменяют ширину текстовой области
2. Когда атрибут стиля textareadisplay изменяется, например когда он переходит с none (скрыт) на block
3. При программном изменении значения textarea

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

Работает для IE6, так что я очень надеюсь, что это достаточно хорошая поддержка.

Вот директива angularjs для ответа panzi.

 module.directive('autoHeight', function() {
        return {
            restrict: 'A',
            link: function(scope, element, attrs) {
                element = element[0];
                var resize = function(){
                    element.style.height = 'auto';
                    element.style.height = (element.scrollHeight)+'px';
                };
                element.addEventListener('change', resize, false);
                element.addEventListener('cut',    resize, false);
                element.addEventListener('paste',  resize, false);
                element.addEventListener('drop',   resize, false);
                element.addEventListener('keydown',resize, false);

                setTimeout(resize, 100);
            }
        };
    });

HTML:

<textarea ng-model = "foo" auto-height></textarea>

Нативное решение Javascript без мерцания в Firefox и быстрее, чем метод withclientHeight ...

1) Добавьте селектор div.textarea ко всем вашим селекторам, содержащим textarea. Не забываем добавить box-sizing: border-box;

2) Включите этот скрипт:

function resizeAll()
{
   var textarea=document.querySelectorAll('textarea');
   for(var i=textarea.length-1; i>=0; i--)
      resize(textarea[i]);
}

function resize(textarea)
{
   var div = document.createElement("div");
   div.setAttribute("class","textarea");
   div.innerText=textarea.value+"\r\n";
   div.setAttribute("style","width:"+textarea.offsetWidth+'px;display:block;height:auto;left:0px;top:0px;position:fixed;z-index:-200;visibility:hidden;word-wrap:break-word;overflow:hidden;');
   textarea.form.appendChild(div);
   var h=div.offsetHeight;
   div.parentNode.removeChild(div);
   textarea.style.height=h+'px';
}

function resizeOnInput(e)
{
   var textarea=document.querySelectorAll('textarea');
   for(var i=textarea.length-1; i>=0; i--)
      textarea[i].addEventListener("input",function(e){resize(e.target); return false;},false);
}

window.addEventListener("resize",function(){resizeAll();}, false);
window.addEventListener("load",function(){resizeAll();}, false);
resizeOnInput();

Протестировано в IE11, Firefox и Chrome.

Это решение создает div, похожий на ваше текстовое поле, включая внутренний текст и измеряет высоту.

В качестве другого подхода вы можете использовать <span>, который автоматически регулирует свой размер. Вам нужно будет сделать его редактируемым, добавив свойство contenteditable = "true", и все готово:

div {
  width: 200px;
}

span {
  border: 1px solid #000;
  padding: 5px;
}

<div>
  <span contenteditable = "true">This text can be edited by the user</span>
</div>

Единственная проблема с этим подходом заключается в том, что если вы хотите отправить значение как часть формы, вам придется сделать это самостоятельно в JavaScript. Сделать это относительно просто. Например, вы можете добавить скрытое поле и в событии onsubmit формы присвоить значение span скрытому полю, которое затем будет автоматически отправлено вместе с формой.

Кажется, ни один из ответов не работает. Но это работает для меня: https://coderwall.com/p/imkqoq/resize-textarea-to-fit-content

$('#content').on( 'change keyup keydown paste cut', 'textarea', function (){
    $(this).height(0).height(this.scrollHeight);
}).find( 'textarea' ).change();

Сделайте TextArea изменяемым размером, который использует q Query

function MakeTextAreaResisable(id) {
    var o = $(id);
    o.css("overflow-y", "hidden");

    function ResizeTextArea() {
        o.height('auto');
        o.height(o[0].scrollHeight);
    }

    o.on('change', function (e) {
        ResizeTextArea();
    });

    o.on('cut paste drop keydown', function (e) {
        window.setTimeout(ResizeTextArea, 0);
    });

    o.focus();
    o.select();
    ResizeTextArea();
}

Вы можете использовать JQuery для расширения textarea при вводе:

$(document).find('textarea').each(function () {
  var offset = this.offsetHeight - this.clientHeight;

  $(this).on('keyup input focus', function () {
    $(this).css('height', 'auto').css('height', this.scrollHeight + offset);
  });
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
<textarea name = "note"></textarea>
<div>

Лучший способ, который я нашел:

$("textarea.auto-grow").each( function(){
    $(this).keyup(function(){
        $(this).height( $(this)[0].scrollHeight - Number( $(this).css("font-size").replace("px", "") ) );
    });
});

У других способов есть ошибка размера шрифта.

Вот почему это лучшее.

Тем, кто хочет добиться того же в новых версиях Angular.

Возьмите textArea elementRef.

@ViewChild('textArea', { read: ElementRef }) textArea: ElementRef;

public autoShrinkGrow() {
    textArea.style.overflow = 'hidden';
    textArea.style.height = '0px';
    textArea.style.height = textArea.scrollHeight + 'px';
}

<textarea (keyup) = "autoGrow()" #textArea></textarea>

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

  public autoGrowShrinkToCertainHeight() {
    const textArea = this.textArea.nativeElement;
    if (textArea.scrollHeight > 77) {
      textArea.style.overflow = 'auto';
      return;
    }
    else {
      textArea.style.overflow = 'hidden';
      textArea.style.height = '0px';
      textArea.style.height = textArea.scrollHeight + 'px';
    }
  }

моя реализация очень проста, подсчитайте количество строк во вводе (и минимум 2 строки, чтобы показать, что это текстовое поле):

textarea.rows = Math.max(2, textarea.value.split("\n").length) // # oninput

полный рабочий пример со стимулом: https://jsbin.com/kajosolini/1/edit?html,js,output

(и это работает, например, с ручкой изменения размера браузера)

Я создал небольшой (7 КБ) настраиваемый элемент, который занимается всей этой логикой изменения размера за вас.

Он работает везде, потому что реализован как настраиваемый элемент. В том числе: виртуальные модели DOM (React, Elm и т. д.), Рендеринг на стороне сервера, например PHP, и простые скучные файлы HTML.

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

Вот как это работает:

// At the top of one of your Javascript files
import "autoheight-textarea";

или включить как тег скрипта

<script src = "//cdn.jsdelivr.net/npm/[email protected]/dist/main.min.js"></script>

затем просто оберните элементы textarea так

HTML файл

<autoheight-textarea>
  <textarea rows = "4" placeholder = "Type something"></textarea>
<autoheight-textarea>

Компонент React.js

const MyComponent = () => {
  return (
    <autoheight-textarea>
      <textarea rows = {4} placeholder = "Type something..." />
    </autoheight-textarea>
  );
}

Вот базовая демонстрация на Codesandbox: https://codesandbox.io/s/unruffled-http-2vm4c

И вы можете скачать пакет здесь: https://www.npmjs.com/package/autoheight-textarea

Если вам просто интересно увидеть логику изменения размера, вы можете взглянуть на эту функцию: https://github.com/Ahrengot/autoheight-textarea/blob/master/src/index.ts#L74-L85

Нашел один лайнер от здесь;

<textarea name = "text" oninput = "this.style.height = ''; this.style.height = this.scrollHeight +'px'"></textarea>

Принятый ответ работает нормально. Но это очень много кода для этой простой функции. Приведенный ниже код поможет.

   $(document).on("keypress", "textarea", function (e) {
    var height = $(this).css("height");
    var iScrollHeight = $(this).prop("scrollHeight");
    $(this).css('height',iScrollHeight);
    });

Это jQuery-версия отвечатьМуссави7.

$(function() {
  $("textarea.auto-grow").on("input", function() {
    var element = $(this)[0];
    element.style.height = "5px";
    element.style.height = (element.scrollHeight) + "px";
  });
})

textarea {
  resize: none;
  overflow: auto;
  width: 100%;
  min-height: 50px;
  max-height: 150px;
}

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class = "auto-grow"></textarea>

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

<textarea id = "my-text-area"></textarea>

<script>
  $(function() {
    const txtArea = $('#my-text-area')
    const val = txtArea.val()
    const rowLength = val.split('\n')
    txtArea.attr('rows', rowLength)
  })
</script>

для Angular 2+ просто сделайте это

<textarea (keydown) = "resize($event)"></textarea>


resize(e) {
    setTimeout(() => {
      e.target.style.height = 'auto';
      e.target.style.height = (e.target.scrollHeight)+'px';
    }, 0);
  }

textarea {
  resize: none;
  overflow: hidden;
}