我有一个 Textarea，用户可以在其中输入文本。默认情况下，它的高度为 17px。但是，如果用户插入大量文本，我希望文本区域相应地扩展。有没有办法用 CSS 做到这一点？提前致谢！！
键入文本时扩展的 CSS Textarea
IT技术
javascript
jquery
html
css
textarea
2021-03-03 05:55:35
6个回答
这不能单独使用 CSS 来完成。尝试自动增长 jquery 插件。 https://github.com/jaz303/jquery-grab-bag/blob/master/javascripts/jquery.autogrow-textarea.js
您还可以在此处查看自动增长演示http://onehackoranother.com/projects/jquery/jquery-grab-bag/autogrow-textarea.html
它重量轻且易于使用。这是它的完成方式。定义你的 textarea id。在 .js 之前包含 jquery js 文件</body>。然后在脚本标签之间，发出 jquery 命令$("#txtInput").autoGrow();
<body>
<textarea id="txtInput"></textarea>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script>
$("#txtInput").autogrow();
</script>
</body>
我知道这有点晚了，但我不得不说有一种方法可以使用<div>withcontenteditable属性来模拟所需的行为。
.textareaElement {
width: 300px;
min-height: 17px;
border: 1px solid #ccc;
max-height: 150px;
overflow-x: hidden;
overflow-y: auto;
}<div class="textareaElement" contenteditable></div>只需设置您的最小和最大高度，使用适当的溢出值，您就拥有功能齐全的纯 CSS 扩展文本框，这也得到了很好的支持。
这个 jQuery 插件真的很棒：http : //www.jacklmoore.com/autosize
我已经测试了很多这些，这是迄今为止最好的。还给出了一个使用 CSS 过渡效果的例子，它非常漂亮。
**请注意，这与上面 Woody 的回答非常相似，但想对其进行一些扩展并提供一个运行代码示例，因为 Stack 允许我们嵌入它们。
在阅读了所有这些并尝试了几个插件之后，我发现这些都没有像我希望的那样奏效。我使用 jquery 执行了以下操作，但可以通过抓取填充值而不是使用内部高度来使用 javascript 轻松完成：
- 在 CSS 中设置textarea的最小高度
- 将溢出设置为隐藏以进行垂直滚动（我只想垂直扩展）
- 如果滚动高度高于高度 + 填充（innerHeight），则在每个keyup事件上将高度设置为滚动高度减去填充。
- 如果滚动高度不高，我将高度重新设置为 1，然后将高度设置为滚动高度减去填充（缩小高度）。如果最初不重置为较小的高度，则滚动高度不会缩小。
$(function() {
$('#myTextArea').on('input keyup paste', function() {
var $el = $(this),
offset = $el.innerHeight() - $el.height();
if ($el.innerHeight() < this.scrollHeight) {
// Grow the field if scroll height is smaller
$el.height(this.scrollHeight - offset);
} else {
// Shrink the field and then re-set it to the scroll height in case it needs to shrink
$el.height(1);
$el.height(this.scrollHeight - offset);
}
});
});#myTextArea {
width: 250px;
min-height: 35px;
overflow-y: hidden;
}<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<textarea id="myTextArea" placeholder="Hit enter a few times, it should expand"></textarea>您不需要为此使用插件。这适用于任何大小、高度或行大小的 textarea，并且仅当内容超出 textarea 时才有效。首先将目标文本区域上的溢出设置为隐藏并调整为无，然后将以下功能添加到要自动增长的文本区域。它不仅会在用户键入时增加 textarea 的大小，还会在删除内容时自动缩小它。
$('textarea').on('paste input', function () {
if ($(this).outerHeight() > this.scrollHeight){
$(this).height(1)
}
while ($(this).outerHeight() < this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"))){
$(this).height($(this).height() + 1)
}
});
它的工作原理是测量 textarea 的滚动高度是否大于外部高度，只有当文本多于 textarea 可以容纳的文本时才会出现这种情况 - 并且它考虑了边框大小以获得更高的准确性。使用粘贴和输入意味着它只会在用户物理更改 textarea 的值时增加，而不是在他们按下任意键时。这是小事，但当有人按下箭头键或其他东西时，textarea 不应该增长。
为那些没有 Javascript 的人添加一个 No JS 选项来重新启用溢出和调整大小可能是谨慎的，否则他们会被一个小盒子卡住。