Question

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

只能用CSS做到这一点吗？

Answer 1

而不是textarea，您可以div使用contentEditable属性：

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

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

DEMO

Answer 2

只需使用CSS，就可以让用户扩展textarea。实际上，在一些现代浏览器中，这种可扩展性甚至是浏览器的默认值。你可以明确地要求它：

textarea { resize: both; }

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

通常只有一小部分关于可调整性的提示：右下角有一个调整大小的句柄。而且我担心大多数用户都不会理解这个提示。

您不能仅使用CSS内容将textarea自动扩展。

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

不幸的是，但是使用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 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;
}
?>

只用CSS扩展textarea是可能的吗？

5 个答案: