我怎样才能自动 fit/resize 一个 html5 textarea 元素来适应初始内容？

Question

目标：

我正在 javaScript/jQuery 中寻找一种调整文本区域大小的方法，以便它最初显示其所有文本内容、隐藏垂直滚动条并显示调整大小手柄。

下面的代码首先显示带有一些内容的文本区域，但不足以显示垂直滚动条。这很好，除了我希望文本区域看起来像这样，无论它包含多少文本，即不显示垂直滚动条。

当您单击该按钮时，将添加更多文本并显示垂直滚动条，这是我在最初说内容过多时要避免的——文本区域应扩展以适应它，我尝试这样做处理接下来的两次按钮点击。

再次单击该按钮会使文本区域变宽，因此 none 当前行换行。

再次单击按钮，现在会导致文本区域变高，因此不再显示垂直滚动条。

但是，textarea 增长太多，文本的最后一行和textarea 的底线之间出现间隙。不是我想要的。

如果textarea的scrollHeight代表整个textarea内容的高度，底部没有空行，为什么会有空隙？

const text = 'This is a line of text';

var   $textarea = $( '#example' );
var   i         = 0;

$textarea.val( $textarea.val() + text );
for( var l = i + 5 ; i < l; ++i )
  $textarea.val( $textarea.val() + "\r\n" + text + '(' + i + ')' );

function doIt( This ) {
  if( This.innerText !== 'Click Me Again' ) {

    for( var l = i + 5 ; i < l; ++i )
      $textarea.val( $textarea.val() + "\r\n" + text + '(' + i + ')' );

    if( This.innerText === 'Click Me' ) {

      This.innerText = 'Click Me Again';
      $( 'p' ).text( 'to make the textarea\s width wider.' );

    }
    else {

      $textarea.css( 'height', 'auto' );  // As per Mr Khan's sugestion.

      $textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' );

      $( 'p' ).html( '<b>Why is there space below the last line of text?</b>' );

    }

  }
  else {

    This.innerText = 'Click Me Some More';
    $textarea.css( 'width', ( $textarea.width() + 36 ) + 'px' );
    $( 'p' ).text( 'to make the textarea\'s height taller and add more text.' );

  }
}

#example { width: 185px; height: 100px; overflow: auto; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>jQuery getScrollBarWidth example</title>
  </head>
  <body>
    <h1>Snippet Example</h1>
    <button onclick="doIt( this );">Click Me</button><br />
    <p>to add more text to the textarea.</p>
    <textarea id="example"></textarea>
  </body>
</html>

更新当使用 Rows 选项时，codePen 最多适用于 1000 行。在 999 行之后调整 textarea 的 rows 属性不再有效，因为每行换行到两行，所以在 999 之后，行可能需要将 2 添加到 rows 属性（未测试）以防止垂直滚动条显示，但向上到 999 行很可能足以应对几乎任何情况。谢谢。

Answer 1

只需在设置 scrollheight 之前将高度设置为自动就可以了

$textarea.css( 'height', 'auto' );
$textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' );

工作示例：

const text = 'This is a line of text';

var   $textarea = $( '#example' );
var   i         = 0;

$textarea.val( $textarea.val() + text );
for( var l = i + 5 ; i < l; ++i )
  $textarea.val( $textarea.val() + "\r\n" + text + '(' + i + ')' );

$textarea.css( 'height', 'auto' );  //==========> Add this here
$textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' ); //==========> Add this here

function doIt( This ) {
  if( This.innerText !== 'Click Me Again' ) {

    for( var l = i + 5 ; i < l; ++i )
      $textarea.val( $textarea.val() + "\r\n" + text + '(' + i + ')' );

    if( This.innerText === 'Click Me' ) {

      This.innerText = 'Click Me Again';
      $( 'p' ).text( 'to make the textarea\s width wider.' );

    }
    else {

      $textarea.css( 'height', 'auto' );  // As per Mr Khan's sugestion.

      $textarea.css( 'height', $textarea[ 0 ].scrollHeight + 'px' );

      $( 'p' ).html( '<b>Why is there space below the last line of text?</b>' );

    }

  }
  else {

    This.innerText = 'Click Me Some More';
    $textarea.css( 'width', ( $textarea.width() + 36 ) + 'px' );
    $( 'p' ).text( 'to make the textarea\'s height taller and add more text.' );

  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="doIt( this );">Click Me</button><br />
    <p>to add more text to the textarea.</p>
    <textarea id="example"></textarea>

我怎样才能自动 fit/resize 一个 html5 textarea 元素来适应初始内容？

How can I auto fit/resize a html5 textarea element to fit the initial content?

html

javascript

css

jquery

autoresize