是否可以仅使用 CSS 扩展文本区域？

Question

我有一个高度为 200px 的 textarea，但是当我通过文本传递 200px 时，我希望扩展 textarea 而不是使用滚动条保持 200px 的高度。

只有 CSS 可以做到这一点吗？

Answer 1

不幸的是没有，但是用 JS 很容易：

let el = document.getElementById(`myTextarea`);
el.addEventListener("input", function() {
  if (el.scrollTop != 0)
    el.style.height = el.scrollHeight + "px";
});

在我的例子中，我有一个玩家姓名列表，我正在为每个玩家循环执行此操作。

              humansContainer.innerHTML = humans
                .map(
                  (h, i) =>
                    `<div><textarea id="human_${i}" type="text" value="${h}">${h}</textarea></div>`
                )
                .join("");
              humans.forEach((h, i) => {
                let el = document.getElementById(`human_${i}`);
                el.addEventListener("input", function(e) {
                  let name = el.value;
                  if (el.scrollTop != 0)
                    el.style.height = el.scrollHeight + "px";
                  humans[i] = name;
                });
              });

Answer 2

仅使用 CSS 就可以让用户扩展文本区域。事实上，在一些现代浏览器中，这种可扩展性甚至是浏览器的默认设置。您可以明确要求：

textarea { resize: both; }

浏览器支持正在增长，但仍然有限。

通常只有一个关于可调整大小的小提示：右下角的调整大小手柄。而且恐怕大多数用户不会理解这个提示。

您不能仅使用 CSS 使文本区域自动按内容扩展。

Answer 3

不，不可能只使用 css，但您可以使用 jquery：

$('#your_textarea').on('keydown', function(e){
    var that = $(this);
    if (that.scrollTop()) {
        $(this).height(function(i,h){
            return h + 20;
        });
    }
});

Answer 4

您可以将div 与contentEditable 属性一起使用，而不是textarea：

div {
  display: inline-block;
  border: solid 1px #000;
  min-height: 200px;
  width: 300px;
}

<div contentEditable="true"></div>

DEMO

Answer 5

这是一个简单的、纯 php 和 html 的解决方案，不需要 js，使 textarea 适合大小。 HTML： <textarea rows="<?php echo linecount($sometext, 100, 3);?>" cols="100" name="sometext"><?php echo $sometext;?></textarea>

    <?php
   /* (c)MyWeb.cool, 2014
   * -------------------------------------------------------------------------
   *Calculate number of rows in a textarea.
   *  Parms :   $text:      The contents of a textarea,
   *            $cols:      Number of columns in the textarea,
   *            $minrows:   Minimum number of rows in the textarea,
   *  Return:   $row:       The number of in textarea.
   * ---------------------------------------------------------------------- */
   function linecount($text, $cols, $minrows=1) {
   // Return minimum, if empty`
   if ($text <= '') {
    return $minrows;
   }
   // Calculate the amount of characters
   $rows = floor(strlen($text) / $cols)+1; 
   // Calculate the number of line-breaks
   $breaks = substr_count( $text, PHP_EOL );
   $rows = $rows + $breaks;
   if ($minrows >= $rows)   {
    $rows = $minrows;
   }
   // Return the number of rows
   return $rows;
   }
   ?> 

`而且这个更短更好：

function linecount($text, $cols, $minrows=1) {
    if ($text <= '') {return $minrows;}
    $text = wordwrap($text, $cols, PHP_EOL);
    $rows = substr_count( $text, PHP_EOL )+1;
    if ($minrows >= $rows) {$rows = $minrows;}
    return $rows;
}
?>