创建一个随输入内容而自动扩大的 textarea 需要使用 JavaScript 来监听 textarea 的输入事件，并根据内容的高度动态调整其大小。下面是一个简单的实现示例：
HTML:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>自动扩大 Textarea</title>
<style>
.auto-grow-textarea {
resize: none; /* 禁止浏览器默认的调整大小功能 */
overflow: hidden; /* 隐藏超出部分 */
padding: 5px; /* 为了更好的视觉效果 */
box-sizing: border-box; /* 确保 padding 和 border 不会增加元素的总宽度和高度 */
min-height: 50px; /* 设置最小高度 */
}
</style>
</head>
<body>
<textarea id="myTextarea" class="auto-grow-textarea" placeholder="在这里输入..."></textarea>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
javascript
document.addEventListener('DOMContentLoaded', function() {
const textarea = document.getElementById('myTextarea');
textarea.addEventListener('input', function() {
this.style.height = 'auto'; // 重置为自动高度
this.style.height = (this.scrollHeight) + 'px'; // 设置为滚动高度
}, false);
});
这个示例中，当用户在 textarea 中输入时，JavaScript 会监听 input 事件，并根据 textarea 的 scrollHeight 属性（即内容的高度，包括不可见部分）来动态调整其高度。这样，textarea 就会随着输入内容的增加而自动扩大。
注意：这个简单的实现可能不适用于所有情况，特别是当 textarea 内有复杂的格式或换行时。如果需要更复杂的处理，你可能需要考虑其他方法或库来实现这一功能。
9452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
