Html 是否可以仅使用 CSS 扩展文本区域？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15865982/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
It is possible to expand a textarea only with CSS?
提问by swayziak
I have a textarea with 200px of height, but when I pass that 200px with text I want to have the textarea expanded instead of keeping the 200px of height with a scroll bar.
我有一个高度为 200px 的 textarea，但是当我通过文本传递 200px 时，我想让 textarea 扩展而不是使用滚动条保持 200px 的高度。
It is possible to do that only with CSS?
只有使用 CSS 才能做到这一点吗？
回答by Engineer
Instead of textarea, you can use divwith contentEditableattribute:
相反的textarea，你可以使用div与CONTENTEDITABLE属性：
div {
display: inline-block;
border: solid 1px #000;
min-height: 200px;
width: 300px;
}<div contentEditable="true"></div>回答by Jukka K. Korpela
It is possible to make a textarea expandable by the user, using just CSS. In fact, in some modern browsers, such expandability is even the browser default. You can explicitly ask for it:
可以仅使用 CSS 使用户可扩展的文本区域。事实上，在一些现代浏览器中，这种可扩展性甚至是浏览器的默认设置。您可以明确要求它：
textarea { resize: both; }
Browser support is growing but is still limited.
浏览器支持正在增长，但仍然有限。
There is typically just a small hint about resizability: a resize handle in the lower right corner. And I'm afraid most users won't understand this hint.
通常只有一个关于可调整大小的小提示：右下角的调整大小手柄。而且恐怕大多数用户不会理解这个提示。
You cannot make a textarea expand automaticallyby content using just CSS.
您不能仅使用 CSS使文本区域根据内容自动扩展。
回答by Jukka K. Korpela
No it is not possible to do only with css, but you could use jquery:
不，仅使用 css 是不可能的，但您可以使用 jquery：
$('#your_textarea').on('keydown', function(e){
var that = $(this);
if (that.scrollTop()) {
$(this).height(function(i,h){
return h + 20;
});
}
});
回答by Michael Aaron Wilson
Unfortunately not, but it is very easy with JS:
不幸的是不是，但是使用 JS 很容易：
let el = document.getElementById(`myTextarea`);
el.addEventListener("input", function() {
if (el.scrollTop != 0)
el.style.height = el.scrollHeight + "px";
});
In my case I have a list of player names and I am doing this in a loop for each player.
就我而言，我有一个玩家姓名列表，并且我正在为每个玩家循环执行此操作。
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;
});
});
回答by Theo Walther
Here's a simple, pure php and html, solution, without need for js, to make the textarea fit to size.
HTML:
<textarea rows="<?php echo linecount($sometext, 100, 3);?>" cols="100" name="sometext"><?php echo $sometext;?></textarea>
这是一个简单的纯 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;
}
?>
`And this one is even shorter and better:
`而这个更短更好：
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;
}
?>
