366

これについては別のスレッドがありました。ただし、問題が1つ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 )
    };
}

— 不満の山羊
ソース

あなたがリンクしたスレッドの受け入れられた答えは私のために働きます。改行を追加するとテキスト領域が拡大され、削除するとテキスト領域が縮小されます。どのブラウザを使用していますか？

— EndangeredMassa

3

機能がエラーになります。行の最後に新しい行を入力する必要があります。これはより良いソリューションです。 james.padolsey.com/javascript/jquery-plugin-autoresize

これのために私のプラグインを試すことができます：github.com/AndrewDryga/jQuery.Textarea.Autoresize

— Andrew Dryga

プロトタイプを使用したテキスト領域

— Ciro Santilli郝海东冠状病六四事件法轮機能

reactを使用している場合は、このためのパッケージを作成しました：npmjs.com/package/react-fluid-textarea

— Martin Dawson

230

これは私にとってはうまくいきます（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で試してみたい場合 は、1行で開始し、必要な量だけを増やします。単一textareaので問題はありませんが、そのようながたくさんあるようなものtextarea（通常、大きなテキストドキュメントに行がある場合とほぼ同じくらい）を書きたかったのです。その場合、それは本当に遅いです。（Firefoxでは、めちゃくちゃ遅いです。）したがって、純粋なCSSを使用するアプローチが本当に必要です。これはで可能ですがcontenteditable、プレーンテキストのみにしたいです。

— パンジ
ソース

13

します！yaのjsfiddleを作成しました：jsfiddle.net/CbqFvこれはChrome、Firefox、IE8で動作します-IE8では少し問題があります。行数を増やしたり減らしたりすると、少しびっくりします。jQueryのautoresizeプラグインで見たように、textareaのクローンを作成し、高さを元の代わりにautoに設定し、それを使用して元のscrollheightを設定することで、これを回避します。私はこの更新されたフィドルでそれを行いました：jsfiddle.net/CbqFv/2これはIEの問題を解決しますが、Firefoxが機能しなくなります。

— Chris Moschini、2011年

3

@HelenNeely：次に、IDを使用しないでください。たとえば、クラスを使用し、そのクラスのすべての要素に対してinitが行うことを実行します。それは初心者のタスクでなければなりません。

— パンジ

3

@DenilsonSá最新のブラウザのみが使用されているとしか想定できない場合は、Webのほうが適しています。

— panzi

2

IE11でスクロールバーが使用されている場合、これはうまく機能しません。このフィドルjsfiddle.net/CbqFvを使用し、スクロールバーが表示されるまで行を入力すると、表示されます。何か案は？

— kaljak

6

textareaがページ下部にある場合、これは完全に機能しなくなりますstyle.height='auto'。これにより、すべてが前後にジャンプします。解決策は、測定にのみ使用される非表示の兄弟を追加することだと思います。

— rr-

372

完全なまだシンプルなソリューション

2020年5月 14日更新（モバイルおよびタブレットのブラウザーサポートの改善）

次のコードが機能します。

キー入力時。
貼り付けられたテキスト（右クリック＆Ctrl + V）。
カットテキスト付き（右クリック＆Ctrl + X）。
事前に読み込まれたテキスト。
すべてのテキストエリア（マルチラインテキストボックス）のサイト全体。
Firefoxの （v31-67がテスト）。
クローム （v37-74がテスト）。
IE （V9-V11はテスト）。
エッジ （V14-V18がテスト）。
IOSサファリ。
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()

TEXTAREA VIA JAVASCRIPTの更新

JavaScriptを介してコンテンツをtextareaに挿入する場合、次のコードを追加して、オプション1の関数を呼び出します。

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

プリセットTEXTAREAの高さ

textareaの初期の高さを修正するには、条件を追加する必要があります。

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>

スニペットを展開

— DreamTeK
ソース

12

これは優れた解決策です。メソッド名とパラメーター名が個々の文字ではなく真の名前に更新された場合は、少しわかりやすくなります。

— Chris Marisic 14年

5

@オブシディアンありがとう！常に0になる理由を理解したところ-ブートストラップモーダルにtextareaを配置しました！モーダルは最初に隠されているとして、その中のテキストエリアは0 scrollHeight😂😂必要があります

— WTIFS

7

@Obsidian Fantastic !! （オプション3）。これthis.style.height = 'auto';は魔法の振る舞いの修正です。scrollHeightの動作が奇妙だった理由に、私はとても苛立ちました。高さを自動にし、同じレンダリングサイクルでscrollHeightを一致させると、技術的に2番目の高さのみをペイントする必要がありますが、この問題をどのように「修正」するかがまだわかりません

— ビットレス

2

今日、Chromeでオプション3を試してみましたが、いくつかの調整が必要でした。1）テキスト領域に「高さ」または「すべて」のトランジションがある場合、常に正しくサイズ変更されるとは限りません。高さに影響する遷移を使用しないことをお勧めします。2）scrollHeightは2行分の高さの最小値を返していました（おそらくそれがChromeのtextareasのデフォルトであるためです）。これを変更すると、this.style.height = 'auto'; this.style.height = '0px'; 初期状態が実際に0にならないようにmin-heightを追加すると、scrollHeightは適切なときに1行の高さを正しく返します。

— ZorroDeLaArena

3

@Obsidian scrollHeight this.style.height = 'auto';の動作を修正する方法を説明できますか？それはただの魔法です。

— シドニー2017

63

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/

— チム
ソース

5

これは良いですがoverflow-y: hidden;、CSSに追加して、サイズ変更が発生したときにスクロールバーが短時間点滅しないようにします。

— brettjonesdev 2013年

完全に定かではありませんが、テキスト領域がないと、テキスト領域が大きくなります。要素scrollHeightの計算方法に関係していると思います。

— チム2013年

1

複数のイベントを使用して、シナリオの幅広い真実性のために作業を行う $('textarea.auto-resize').on('change cut paste drop keyup', function(){...})

— raxith

1

Chrome 40 Win 8.1のビューポートよりも長いテキストでクレイジーにジャンプします。まったく使用できなくなります。

— tobibeer 2015

1

Enter（改行）キーを押すと、スクロールします。キーを離すまでサイズは調整されません。

— Niels Abildgaard、2015

28

<!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タグなしで実行することもできますが、少し面倒になります（これは古いスタイルのHTML + JSであり、推奨されません）。

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

編集：近代化されたコード。onkeyup属性をaddEventListenerに変更しました。
編集：キーダウンはキーアップよりも
機能します編集：関数を使用する前に関数を宣言します
：入力はキーダウンよりも機能します（thnx @ WASD42＆@ MA-Maddin）

jsfiddle

— GijsjanB
ソース

3

これにはいくつかの欠点があります。1）Textareaのサイズが変更されず、マウスボタンだけで何かを貼り付けます。2）ユーザーがキーボード（Ctrl + V）を使用して何かを貼り付ける場合、Ctrlを離したときにのみテキストエリアのサイズが変更されます。ユーザーがCtrl + Vを数回押すと、テキストエリアは最後のテキストエリアの後にのみ大きくなります。イベントの貼り付け、切り取り、変更、ドロップにも同じ機能を追加する必要があります。

— WASD42 2013

input代わりにイベントを使用してください。stackoverflow.com/a/14029861/1951524を

— Martin Schneider

textareaワンライナーとして複数のサポートを備えた改良バージョン：

document.querySelectorAll('textarea').forEach(function(te){ te.addEventListener("input", function() { this.style.height='24px'; this.style.height=this.scrollHeight+12+'px'; }); });

— Meisner

1

@Meisner短いですが、「改善された」とは言えません。無名関数ではremoveEventListener、イベントリスナーを呼び出してクリーンアップする方法はありません。これは、forEachループのあらゆる場所でイベントリスナーを作成する場合に特に重要です。さらに、私の見解では、読みやすさは簡潔さよりもはるかに重要です。

— GijsjanB 2017年

他の人や将来の私は、box-sizing: border-box;プロパティが設定されていることを確認してください。そうでない場合は、onInputイベントごとにtextareaが4pxずつ拡張されます。これが問題だとわかるまで、私は3時間ほど費やしました。

— AIon

24

私にとって最良の解決策（機能し、短い）は次のとおりです。

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

ペースト（マウスでも可）、カット、エンターで点滅せずにチャームのように機能し、適切なサイズに縮小します。

jsFiddleをご覧ください。

— ヴァタベール
ソース

すごい！ワンラインディール！それがサイズ変更したときにアニメーションを追加できますか？テキストボックスのように、サイズにジャンプするのではなく、穏やかにサイズ変更しますか？

— user2513846 2016年

1

@ user2513846複数行編集のデザインでは不可能のようです。私はテキストエリアのサイズをアニメーション化する例を作りました：jsfiddle.net/yk2g333eご存知のように、テキストカーソルは行とキャレットの位置で下に移動するため、この瞬間に一時停止がない場合、アニメーション化するものはありません。しかし、一時停止はユーザーを困らせることになります。

— vatavale 2016年

1

@ user2513846ただし、textareaの最後に空の行がもう1つあるため、スムーズなアニメーションを作成できます：jsfiddle.net/p23erdfr

— vatavale

16

現在のclientHeightとコンテンツscrollHeightの高い方の値を使用しています。コンテンツを削除してscrollHeightを小さくすると、以前にstyle.heightで設定されたclientHeightが開いたままなので、計算された領域は小さくなりません。代わりに、max（）のscrollHeightと、事前定義またはtextarea.rowsから計算した最小の高さの値を取得することもできます。

一般に、フォームコントロールのscrollHeightに実際に依存するべきではありません。scrollHeightは、他のIE拡張機能の一部よりも広くサポートされていないことを除けば、HTML / CSSはフォームコントロールが内部でどのように実装されているかについて何も述べておらず、scrollHeightが意味のあるものであると保証されていません。（伝統的に一部のブラウザはタスクにOSウィジェットを使用しており、内部でCSSとDOMの相互作用を不可能にしています。）効果を有効にする前に、少なくともscrollHeight / clientHeightの存在を確認します。

より広く機能することが重要である場合に問題を回避するための別の可能な代替アプローチは、textareaと同じ幅にサイズ設定され、同じフォントで設定された非表示のdivを使用することです。キーアップ時に、textareaのテキストを非表示のdivのテキストノードにコピーします（innerHTMLを使用している場合は、 '\ n'を改行で置き換え、 '<' / '＆'を適切にエスケープしてください）。次に、divのoffsetHeightを測定するだけで、必要な高さが得られます。

— ボビンス
ソース

1

scrollHeightテキストエリアで問題が発生するはずのブラウザはどれですか？IE、Firefox、Operaの現在のバージョンで問題なく動作する

— Christoph

1

私が手にしなければならないのはKonquerorだけです。これはclientHeightをscrollHeightとして返します。これは、ブラウザーがCSSボックスモデルをウィジェットの内部に適用しない限り期待できる動作です。ウィジェットが常に実行しているわけではなく、標準がそうしなければならないということはありません。

— ボビンス、2009年

14

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>

それがどのように機能するかについては、私のブログ投稿で詳しく読むことができます。

— マクシミリアンホフマン
ソース

1

素晴らしい解決策ですが、少し修正する必要があります。textareaのコンテンツが読み込まれるとf.ex. データベースから、textareaは小さいままです。inputforeachサイクルの初期化中にイベントをトリガーする必要があります。

— Ajax

11

自動サイズ

https://github.com/jackmoore/autosize

スタンドアロンで動作するだけで、人気があり（2018年10月の時点で3.0k以上のGitHubスター）、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：自動的にエースクラウド9エディタの内容に高さを調整します

— Ciro Santilli郝海东冠状病六四事件法轮功
ソース

2

バージョン2は2015年2月にリリースされました。バージョン2はよりシンプルになり、jQueryに依存しなくなりました

— パリッとした

申し訳ありませんが、動作します。たぶん私はそう、私はあなたが私のコメントを無視するならば、それはより良いことだと思う..他のブラウザでいた

— トニミシェルCaubet

@ToniMichelCaubetああ、CDNの問題かもしれません。確認させてください。

— Ciro Santilli郝海东冠状病六四事件法轮功

autosizeプラグインは、手動でテキストエリアでのサイズ変更アイコンを使用してサイズを変更することはできません。

— j4v1

7

ここからワンライナーを見つけました。

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

— 17000
ソース

6

誰もがコンテンツ編集可能と考えましたか？スクロールをいじる必要はありません、そして私がそれについて気に入っている唯一の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>

— ウェブマスターG
ソース

ChromeはEnterで<div>要素を追加します。

— sbaechler 2016年

contenteditable良いですが、プレーンテキストが必要な場合は、-webkit-user-modify: read-write-plaintext-onlyおよびのようなたくさんのオプションが必要white-space: pre-wrapです。

— mik01aj 2017

@_sbaechler：を使用する場合、<div>は省略され[dom-element].innerTextます。@WebmasterG IMHO jquery（省略）を省略し、jsfiddleではなく実行可能なコードスニペットを介してこのページに例を含めるとよいでしょう。

— adabru

4

複数のテキストエリアに次のコードを使用しました。Chrome12、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

少し異なるアプローチがあります。

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

— カロリスジュオデロ
ソース

1

" フォントサイズがと同じであることを確認しpreてくださいtextarea -"と同じline-height、paddingおよび/または同じ量が必要borderです。これはAngularに最適なソリューションです。

— Jamie Barker

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さらにいくつかの状況で関数を呼び出す必要があります。

ウィンドウのサイズ変更イベント（幅が textarea変更されたまたはテキストエリアの幅を変更する他のイベント
ときtextareaのdisplayスタイル属性の変更、例えばそれから行きますnone（隠された）へblock
textareaプログラムによって値が変更されたとき

使用しwindow.getComputedStyleたり取得したりcurrentStyleすると、計算に多少負荷がかかる可能性があるため、代わりに結果をキャッシュすることをお勧めします。

IE6で動作するので、これで十分なサポートが得られれば幸いです。

— ジョセフ・ニールズ
ソース

4

別のアプローチとして、<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非表示フィールドに割り当て、フォームに自動的に送信されます。

— ラシル・ヒラン
ソース

このページのcontentEditableを使用して答えはすでにあり：stackoverflow.com/questions/454202/...

— adabru

@adabruはい、しかし2つの答えは同じではありません。トヨタは赤い車を作り、フォードも赤い車を作っていますが、違いますね。他の答えがもっと好きなら、それで行ってください。しかし、私の答えをもっと高く評価し、それでうまくいく人もいます。さまざまなオプションがあることは良いことです。

— Racil Hilan 2018

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

— artnik-pro
ソース

行がオーバーフローしない限り機能します-その後、それらは適合しません。

— トマーシュカフカ

— すぐに使える

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>

jQuery .live()は非推奨になりました。api.jquery.com/live通常は.on()代わりに使用します。

— ルーク

2

誰かがこのように言っているかどうかはわかりませんが、場合によっては行属性で高さのサイズを変更することが可能です

textarea.setAttribute('rows',breaks);

デモ

— h0mayun
ソース

1

それはあなたが持っている場合にのみ機能しますwhite-space: nowrap;。行が改行なしで別の行に折り返されると、textareaが正しく調整されなくなります。

— イエティ2017

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>

— chrmcpn
ソース

setTimoutではなく$ timeoutを使用する必要があります-これにより、モデルが確実に初期化されます（ミリ秒を指定する必要はありません-Angularダイジェストサイクルの後で実行されます）。また、element = element [0]; 非常に悪い習慣です...とにかく、私はtextareaが1行になるまで、textareaが1行である必要があるため、このソリューションは私にとっては良くありません。

— Karol Websky 2017

2

textarea入力中に、JQueryを使用して、while を展開できます。

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

スニペットを展開

— マウリシオサンチェス
ソース

最もクリーンなソリューション。ただし、jQueryの使用を停止する必要があるため、textarea.addEventListener（ 'keyup'、（）=> {textarea.style.height = 0; textarea.style.height = ${textarea.scrollHeight}px;}）;

— Toni Michel Caubet

2

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

— ディビャンシュラワット
ソース

1

ここでの回答の一部はパディングを考慮していません。

あなたがやりたくない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

— 蘇らせる
ソース

編集後にテキストを削除しようとしましたか？テキストエリアは崩壊しましたか？

— 18C

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

http://javierjulio.github.io/textarea-autosizeのjavascriptライブラリをお勧めしますます。

コメントごとに、プラグインの使用に関するサンプルコードブロックを追加します。

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

— オレンジ01
ソース

1

qQueryを使用するMakeTextAreaResisable

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

— イゴール・クルピツキー
ソース

1

どの回答も機能しないようです。しかし、これは私にとってはうまくいきます：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();

— キム・ホーマン
ソース

「キーアップ」イベントを聞くにはこれで十分ですが、これは受け入れられる答えになるはずです

— ボブ・ロス

1

私の実装は非常に単純です。入力の行数を数えます（それがテキストエリアであることを示すために最低2行）：

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

スティミュラスを使用した完全な動作例：https : //jsbin.com/kajosolini/1/edit?html,js,output

（これは、たとえばブラウザの手動のサイズ変更ハンドルで機能します）

— localhostdotdev
ソース

2

これは、「Enter」を押して行を分割した場合にのみ機能します。テキストがtextareaの幅よりも長いが「Enter」を押さない場合、テキストは拡張されません。

— ナタリアザビエル

1

受け入れられた回答は問題なく機能しています。しかし、これはこの単純な機能のための多くのコードです。以下のコードがトリックを行います。

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

— karthik_krish
ソース

0

これは、TextAreaでMVC HTMLヘルパーを使用しているときに行ったものです。私はかなりの数の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でテストしました

— Gunnerz
ソース

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

— ダレックス1991
ソース

自動サイズ変更でテキストエリアを作成する

完全なまだシンプルなソリューション

オプション1 （jQueryを使用）

オプション2 （純粋なJavaScript）

オプション3 （jQuery拡張）

TEXTAREA VIA JAVASCRIPTの更新

プリセットTEXTAREAの高さ