web-dev-qa-db-ja.com

自動サイズ変更によるテキストエリアの作成

これについて 別のスレッド がありましたが、私は試してみました。しかし、問題が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 )
    };
}
javascripthtmlresizeheighttextarea
309
DisgruntledGoat

これは私にとってはうまくいきます（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>

試してみたい場合 jsfiddle1行で始まり、必要な正確な量だけ大きくなります。 。 1つのtextareaでも構いませんが、そのようなtextareaをたくさんたくさん（大規模なテキスト文書に通常は1行も含めることができる程度の）多くの場所に書く必要があります。その場合それは本当に遅いです。 （Firefoxではめちゃくちゃ遅いです。）だから私は本当に純粋なCSSを使用するアプローチが欲しいのですが。これはcontenteditableでも可能ですが、プレーンテキストのみにしたいです。

197
panzi

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

更新2009年7月7日（携帯電話とタブレットのブラウザサポートの向上）

次のコードは動作します。

  • キー入力時.
  • 貼り付けたテキスト付き（右クリック＆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

Simple（この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）

Simple（この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>

Test on jsfiddle

オプション3（jQuery Extension）

自動サイズにしたいテキストエリアにさらに連鎖を適用したい場合に便利です。

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を介してテキストエリアにコンテンツを挿入するときは、オプション1の関数を呼び出すために次のコードを追加します。

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

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以降のOR代替手段...

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

62
chim
<!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

28
GijsjanB

私にとって最良の解決策（うまくいく、そして短い）は：

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

それは（マウスでも）ペーストで点滅することなく魅力的に働き、切り取り、入り、そしてそれは正しいサイズに縮小します。

jsFiddle をご覧ください。

24
vatavale

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

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

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

16
bobince

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
Maximilian Hoffmann

自動サイズ調整

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を使用してください。 Ace Cloud 9エディタの内容に合わせて自動的に高さを調整する

11
Ciro Santilli 新疆改造中心996ICU六四事件

誰かが満足していると考えましたか？スクロールに煩わされることはなく、ぼかしでデータを保存する予定があるのであれば私が好きな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
Webmaster G

私は複数のテキストエリアに次のコードを使いました。 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
Nikunj Bhatt

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

<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では、textareaにng-model="foo" ng-trim="false"を、preにng-bind="foo + '\n'"を追加します。 フィドル を参照してください。

preがtextareaと同じフォントサイズであることを確認してください。

4
Karolis Juodelė

別の方法として、サイズを自動的に調整する<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の値を割り当てると、自動的にフォームとともに送信されます。

4
Racil Hilan

マウス、キーボードショートカット、メニューバーからオプションを選択するかどうかにかかわらず、次のように切り取り、貼り付けなどが機能します。サイジング、これが彼らが間違ってスタイル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. textareaのdisplayスタイル属性が変化したとき、例えばnone（hidden）からblockに変わったとき
  3. textareaの値がプログラム的に変更されたとき

window.getComputedStyleを使うことやcurrentStyleを取得することはいくぶん計算上高価になることがあるので、代わりに結果をキャッシュしたいかもしれないことに注意してください。

IE6に対応しているので、それで十分なサポートが得られることを願っています。

4
Joseph Nields

次のように入力しながら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>
2
Mauricio Sánchez

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

textarea.setAttribute('rows',breaks);

デモ

2
h0mayun

これがpanziの答えに対する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
chrmcpn

私は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
user1432124

少し修正。 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
artnik-pro

さらにシンプルでクリーンな方法は次のとおりです。

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

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

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

刺激を伴う完全な動作例： https://jsbin.com/kajosolini/1/edit?html,js,output

（そしてこれは例えばブラウザの手動リサイズハンドルで動作します）

1
localhostdotdev

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
Divyanshu Rawat

このコードは貼り付けに使用でき、削除も選択します。

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
Kurenai Kunai

ここでの答えのいくつかはパディングを説明していません。

あなたが行きたくない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
hasen

以下のようなスタイルで<pre> </pre>を使うだけです。

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

私が見つけた最良の方法：

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

他の方法ではフォントサイズのバグがあります。

どうしてこれが一番いいのか。

0
Karl Zillner

これが、MVC HTML Helper for 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でそれをテストしました

0
gunnerz

答えはどれもうまくいかないようです。しかし、これは私のために働く： 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
Kim Homann

このコードを使うことができます：

コーヒースクリプト：

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
Darex1991

このコードを使用して、テキストエリアに必要な行数を計算できます。

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

}
0
André

テキストエリアを幅と高さの両方で自動的にサイズ変更したい人のために：

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
Goon Nguyen

JQueryの解決策は、textareaの高さを 'auto'に設定し、scrollHeightを確認してからtextareaの高さをそれに合わせることです。textareaが変わるたびに（ JSFiddle ）：

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

テキストエリアを（AJAXなどを介して）動的に追加する場合は、これを$（document）に追加できます。クラス 'autoheight'を持つすべてのテキストエリアがそれらと同じ高さに保たれるようにします。コンテンツ：

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

Chrome、Firefox、Opera、IEでテストされ、動作しています。カットアンドペースト、ロングワードなどにも対応.

0
patrick

Firefoxでちらつきがなく、メソッドwithclientHeightよりも高速なネイティブJavascriptソリューション...

1）textareaを含むすべてのセレクタにdiv.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を作成し、高さを測定します。

0
18C

Q Queryを使用するTextAreaをサイズ変更可能にする

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
Igor Krupitsky