textarea换行后自动增加高度
时间: 2024-11-27 10:22:05 浏览: 5
vue + el-input 中 textarea 实现 placeholder 换行
`textarea`元素在JavaScript中换行后自动增加高度通常需要借助一些动态计算或者事件监听来实现。当你在textarea内输入文字并按下回车键时,浏览器默认会添加一个新的行,但是`textarea`的高度并不会实时更新。以下是一个简单的例子,利用`oninput`事件来监听文本框内容的变化,并调整其高度:
```javascript
// 获取textarea元素
const textarea = document.getElementById('your-textarea-id');
// 监听textarea内容变化
textarea.addEventListener('input', function() {
// 设置最大高度限制(防止无限增长)
const maxHeight = 500; // 根据需求设置
const currentHeight = this.scrollHeight;
if (currentHeight > maxHeight) {
this.style.height = maxHeight + 'px'; // 保持高度不超过设定值
} else {
this.style.height = null; // 如果内容不高于最大值,恢复高度自动调整
}
});
```
这个示例会在用户输入时检查当前高度,如果超过了预设的最大高度(这里假设是500像素),则固定高度;否则,`textarea`的高度会随着输入的内容自然增加。
阅读全文