不行,textarea 中内容比较多的时候,textarea 并没有自动增高
时间: 2024-11-03 07:18:53 浏览: 11
js textarea自动增高并隐藏滚动条
确实,在默认设置下,textarea 的高度不会随着内容增加而自动增高。如果内容较多,用户需要滚动才能看到全部内容。为了提供更好的用户体验,我们可以使用JavaScript来实现动态调整textarea的高度。以下是一个简单的解决方案:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.auto-resize-textarea {
overflow: auto;
min-height: 60px; /* 设置最小高度,防止过小 */
max-height: none; /* 解除最大高度限制,允许高度随内容增长 */
}
</style>
</head>
<body>
<textarea class="auto-resize-textarea" id="content-area" oninput="resizeTextArea(this)">
<!-- 输入大量内容 -->
</textarea>
<script>
function resizeTextArea(textarea) {
const { scrollHeight, clientHeight } = textarea;
if (scrollHeight > clientHeight) {
textarea.style.height = `${scrollHeight}px`;
}
}
</script>
</body>
</html>
```
在这个例子中,我们给textarea添加了一个`.auto-resize-textarea`样式,设置了`min-height`来保证最小高度,然后通过`oninput`事件监听器实时监测内容高度,并将其设置为`scrollHeight`(即文本区域总高度),以便于高度跟随内容自动调整。
阅读全文