Создание textarea с автоматическим изменением размера

было еще одна тема об этом, который я пробовал. Но есть одна проблема: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 )
    };
}
276
height html javascript resize textarea

30 ответов

это работает для меня (в 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, но я хотел написать что-то, где у меня было бы много много много таких textareas (примерно столько, сколько обычно имеют строки в большом текстовом документе). В таком случае это очень медленно. (В Firefox это безумно медленно.) Что мне нравится подход, который использует чистый CSS. Это было бы возможно с contenteditable, но я хочу, чтобы это был только открытый текст.

175

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

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

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

  • на клавишу Ввод.
  • с вставленным текстом (щелкните правой кнопкой мыши и ctrl+v).
  • с вырезанным текстом (щелкните правой кнопкой мыши и ctrl+x).
  • С предварительно загруженным текстом.
  • со всеми textarea (многострочное текстовое поле) и сайт широкий.
  • С в Firefox (v31-55 проверено).
  • С Chrome (v37-60 проверено).
  • С IE (протестировано v9-v11).
  • С Edge (в14-программы V15 проверено).
  • С айфоновском Safari.
  • С Android Браузер.
  • С JavaScript строгого режима.
  • Is консорциума W3C проверено.
  • и оптимизирован и эффективен.

Вариант 1 (С jQuery)

этот код требует в jQuery и был протестирован и работает с 1.7.2 - 3.2.1

простой (добавьте этот код jquery в ваш файл master script и забудьте об этом.)

$('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://code.jquery.com/jquery-3.2.1.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>

тест на jsfiddle

вариант 2 (Чистый JavaScript)

простой (добавьте этот JavaScript в файл мастер-скрипта и забудьте об этом.)

var tx = document.getElementsByTagName('textarea');
for (var 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>

234

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

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

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

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

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

jsfiddle

28

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

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

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

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

21

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

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

еще один возможный альтернативный подход, чтобы избежать этой проблемы, если важно, чтобы она работала более широко, может заключаться в использовании скрытого div размером с ту же ширину, что и textarea, и установить тот же шрифт. На keyup вы копируете текст из textarea в текстовый узел в hidden div (не забывая заменить "\n "на разрыв строки и избежать"

16

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

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

14

autosize

https://github.com/jackmoore/autosize

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

<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

9

кто-нибудь считал contenteditable? Не возиться с прокруткой, и единственный 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>
6

я использовал следующий код для нескольких переключателей. Отлично работает в 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>
4

следующие работы для резать, наклеивать, ЕТК., независимо от того, являются ли эти действия от мыши, сочетания клавиш, выбрав опцию из строки меню ... несколько ответов принимают аналогичный подход, но они не учитывают размер коробки, поэтому они неправильно применяют стиль 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 изменения с изменением размера окна или другие события, которые изменяют ширину textarea
  2. когда textarea ' s display изменения атрибута стиля, например, когда он идет от none (скрытый)block
  3. когда значение textarea изменен программно

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

работает для IE6, поэтому я действительно надеюсь, что это достаточно хорошая поддержка.

4

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

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

3

немного исправлений. Отлично работает в 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;
  });
2

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

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

textarea.setAttribute('rows',breaks);

демо

2

вот директива angularjs для ответа панци.

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

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

2

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

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

еще более простой, более чистый подход таков:

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

1

этот код работает для вставки и также выберите Удалить. 

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

1

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

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

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

 @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

0

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

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

для тех, кто хочет, чтобы 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

спасибо,

0

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

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

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

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

проверены и работают в Chrome, Firefox, Opera и IE. Также поддерживает Cut и Paste, длинные слова и т. д.

0

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

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

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

код шаблона:

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

авто-пленкой.директива.ТС

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

}
0

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

0

MakeTextAreaResisable, который использует qQuery

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

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

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

я применил сценарий DisgruntledGoat с помощью jQuery и добавил chrome fix

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