Можно расширить текстовое поле только с помощью CSS?

У меня есть textarea с 200px высоты, но когда я передаю этот 200px с текстом, я хочу, чтобы расширение textarea расширялось, а не сохраняло 200px высоты с полосой прокрутки.

Это можно сделать только с помощью CSS?

Ответ 1

Вместо textarea вы можете использовать div с contentEditable:

  div {
 display: inline-block;
 граница: сплошная 1px # 000;
 min-height: 200px;
 ширина: 300 пикселей;
}Код>

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

Ответ 2

Можно создать текстовую область, расширяемую пользователем, используя только CSS. Фактически, в некоторых современных браузерах такая расширяемость - это даже браузер по умолчанию. Вы можете явно спросить об этом:

textarea { resize: both; }

Поддержка браузера растет, но по-прежнему ограничена.

Обычно имеется небольшой намек на возможность изменения размеров: ручка изменения размера в правом верхнем углу. И я боюсь, что большинство пользователей не поймут этот намек.

Вы не можете автоматически создавать текстовое пространство по контенту, используя только CSS.

Ответ 3

Нет, это невозможно сделать только с css, но вы можете использовать jquery:

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

Ответ 4

Здесь простое, чистое php и html-решение, не требующее js, чтобы размер текстовой области соответствовал размеру. 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;
}
?>