Создание текстового поля с автоматическим изменением размера

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

Код с этой страницы приведен ниже:

function FitToContent(id, maxHeight)
{
   var text = id && id.style ? id : document.getElementById(id);
   if ( !text )
      return;

   var adjustedHeight = text.clientHeight;
   if ( !maxHeight || maxHeight > adjustedHeight )
   {
      adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
      if ( maxHeight )
         adjustedHeight = Math.min(maxHeight, adjustedHeight);
      if ( adjustedHeight > text.clientHeight )
         text.style.height = adjustedHeight + "px";
   }
}

window.onload = function() {
    document.getElementById("ta").onkeyup = function() {
      FitToContent( this, 500 )
    };
}

ОТВЕТЫ

Ответ 1

Это работает для меня (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>

Ответ 2

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

Обновлено 07/05/2019 (улучшена поддержка браузеров для мобильных телефонов и планшетов)

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

  • На клавишном вводе.
  • Со вставленным текстом (щелкните правой кнопкой мыши и Ctrl + V).
  • С вырезанным текстом (щелкните правой кнопкой мыши и Ctrl + X).
  • С предварительно загруженным текстом.
  • Со всеми текстовыми (многострочными) текстовыми полями.
  • С Firefox (протестировано v31-67).
  • С Chrome (проверено v37-74).
  • С IE (проверено v9-v11).
  • С Edge (проверено 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>

Ответ 3

Решение 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/

Ответ 4

<!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 произвольны, проверьте, что лучше всего подходит.

Вы можете обойтись без тегов стиля и 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

Ответ 5

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

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

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

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

Ответ 6

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

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

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

Ответ 7

Если вам не нужна поддержка 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>

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

Ответ 8

авто размер

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>

Ответ 9

Кто-нибудь посчитал приемлемым? Нет необходимости возиться с прокруткой, и единственное, что мне нравится в JS, - это если вы планируете сохранять данные в режиме размытия... и, очевидно, оно совместимо со всеми популярными браузерами: 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 Mouse</div>

Ответ 10

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

<!-- language: lang-html -->
<style type='text/css'>
textarea { border:0 none; overflow:hidden; outline:none; background-color:#eee }
</style>
<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>
<script type='text/javascript'>
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
</script>

Ответ 11

Существует несколько иной подход.

<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. См. fiddle.

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

Ответ 12

Следующие операции для резки, склеивания и т.д., независимо от того, являются ли эти действия с помощью мыши, сочетанием клавиш, выбором опции из строки меню... несколько ответов используют аналогичный подход, но они не учитывают для выбора размера окна, поэтому они неправильно применяют стиль 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>

Ответ 13

В качестве другого подхода вы можете использовать <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>

Ответ 14

Немного поправок. Прекрасно работает в 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;
  });

Ответ 15

Я знаю короткий и правильный способ реализации этого с jquery.No дополнительный скрытый 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>

Ответ 16

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

textarea.setAttribute('rows',breaks);

Демо

Ответ 17

Вот директива 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>

Ответ 18

Вы можете использовать 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>

Ответ 19

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

Предполагая, что у вас есть 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);

Ответ 20

Еще более простой и понятный подход заключается в следующем:

// 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

Ответ 21

Этот код работает для вставки и также выбирает delete.

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>

Ответ 22

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

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

Ответ 23

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

Захватить текст

@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';
    }
  }

Ответ 24

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

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

и в script добавил:

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

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

Ответ 25

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

Coffescript:

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

Ответ 26

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

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.log($(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

Приветствия,

Ответ 27

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

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

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

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

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

Ответ 28

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

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

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

Код шаблона:

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

автотрансформаторы 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;
  }

}

Ответ 29

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

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

2) Включите этот script:

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, похожий на ваше текстовое поле, включая внутренний текст и высоту мер.

Ответ 30

Ни один из ответов, похоже, не работает. Но этот работает для меня: 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();