CSS Textarea在您键入文本时展开
Spe*_*cer 38 html javascript css jquery textarea
我有一个Textarea用户可以输入文本.默认情况下,它的高度为17px.但是,如果用户插入大量文本,我希望文本区域相应地扩展.有没有办法用CSS做到这一点？提前致谢!!
Hus*_*ein 25
仅使用CSS无法做到这一点.尝试使用autogrow 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.之前包含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>
- 为什么javascriptly链接带我的bet365.com! (7认同)
- `$('#textInput').autoGrow();`应该是`$(#txtInput).autogrow();` (2认同)
小智 20
这个jQuery插件非常棒:http: //www.jacklmoore.com/autosize
我已经测试了很多这些,这是迄今为止最好的.还给出了一个使用非常光滑的CSS过渡效果的示例.
- 我同意这是最好的解决方案.最重要的是,它修复了这个错误:**当隐藏textarea y溢出时,Chrome/Safari不会重排文本以解释通过删除滚动条可用的空间.**标记为答案的autogrow jquery插件不会有这个修复. (2认同)
小智 16
**注意这与Woody上面的回答非常相似,但是想稍微扩展它并提供一个运行代码示例,现在Stack允许我们嵌入它们.
阅读了所有这些并尝试了几个插件后,我发现这些都没有像我希望的那样完成.我做了以下操作 - 当你在扩展之前滚动时,在场的顶部有轻微的抖动,但它适用于我.我使用了jquery,但是可以通过抓取填充值而不是使用内部高度来轻松完成javascript:
- 在css中设置textarea的最小高度
- 将溢出设置为隐藏以进行垂直滚动(我只想垂直扩展)
- 如果滚动高度高于height + padding(innerHeight),则将高度设置为每个keyup事件的滚动高度减去填充.
- 如果滚动高度不高,我将高度重新设置为1,然后将高度设置为滚动高度减去填充(以缩小高度).如果最初没有重置为较小的高度,则滚动高度不会缩小.
$(function() {
$('#myTextArea').on('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>mom*_*loo 14
我知道这有点晚了,但我不得不说有一种方法可以使用<div>with contenteditable属性来模拟所需的行为.
.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扩展文本框,这也得到了很好的支持.
- 这是一个很好的解决方案！唯一的复杂之处在于，当您按 Enter/return 时，它会将所有新文本放入一个 `<div>` 块中。所以innerHTML变成了一个文本节点，后面跟着一堆`<div>`。 (2认同)
- 我认为这也是一个很好的解决方案，但是如果您对文本进行任何操作，contentEditable 很快就会变成一场灾难，因为它的处理方式非常不同，而且文档也不是很好。如果您只想要一个简单的文本输入，那么可以，但请注意有很多带有可编辑内容的曲线球。 (2认同)
Woo*_*yne 13
你不需要一个插件.这适用于任何大小,高度或行大小的textareas,仅在内容超出textarea时才有效.首先将目标textareas上的溢出设置为隐藏并调整为无,然后将以下功能添加到要自动增长的textareas中.它不仅会在用户输入时增加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不应该长大.
谨慎的做法是添加一个No JS选项,为那些没有Javascript的人重新启用溢出和调整大小,否则他们将被困在一个小盒子里.