只能用CSS擴展一個textarea是可能的嗎？

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做的，但你可以使用jQuery：

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

Answer 3

用戶只需使用CSS即可製作textarea文件。事實上，在一些現代瀏覽器中，這種可擴展性甚至是瀏覽器的默認設置。您可以明確要求它：

textarea { resize: both; } 

瀏覽器支持正在增長，但仍然有限。

有通常只是可調整大小的一個小提示：在右上角有一個調整手柄。我恐怕大多數用戶都不會理解這個提示。

您不能通過僅使用CSS的內容使textarea自動擴展。

Answer 4

這裏有一個簡單，純粹的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; 
} 
?>