从元素输入中填写时自动调整文本区域的大小- Javascript
从元素输入中填写时自动调整文本区域的大小- Javascript
提问于 2019-11-12 19:09:02
我正在尝试创建一个自动调整大小的函数，它根据文本上下文调整文本区的高度。但是，内容来自表单的输入元素，因此用户将在表单中输入它。例如：
<input placeholder="name" value=""/>
<input placeholder="address" value=""/>
<input placeholder="company" value=""/>
<input placeholder="telephone" value=""/>
<textarea value={this.getFinalSentence()}></textarea>因此，在本例中，用户将在input元素上输入其信息。例如，文本区域高度，如果信息数据比textarea高度更长，它将增加。
有没有人遇到过这个问题？到目前为止，如果用户编辑文本区，我可以调整文本区的大小，但不能从输入中调整大小。您的帮助我们将不胜感激。
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-11-12 20:24:35
你需要监听内容的变化，并将文本区域的高度更新为scrollHeight。
工作代码片段：https://jsfiddle.net/0zsd3nty/
<textarea id ="content">some text</textarea>
document.getElementById("content").addEventListener("keyup", function() {
let scrollHeight = this.scrollHeight;
let height = this.clientHeight;
if (scrollHeight > height) {
this.style.height = scrollHeight + 'px';
}
});类似的解决方案也在：jQuery / JS get the scrollbar height of an textarea上
Stack Overflow用户
发布于 2019-11-12 19:18:17
我建议将输入的值放入状态。然后根据内容长度计算文本区域的rows属性。
const rows = Math.ceil(this.getFinalSentence().length/TEXTAREA_LINE_LENGTH)
Stack Overflow用户
发布于 2019-11-12 19:28:55
当scroll函数被触发时，您可以监听scroll并添加另一行
<textarea id ="ta" cols="8" rows="5">afefeefaefae</textarea>
<script>
document.getElementById("ta").addEventListener("scroll",function() {
this.rows++;
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58825142
复制相关文章
点击加载更多
相似问题
如何在加载时自动调整文本区域元素的大小？
JS -如何根据从其他文本区域输入镜像的输入文本自动调整文本区域的大小？
自动调整文本区域大小
动态输入文本后自动调整文本区域字段的大小
自动调整文本区域的大小？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
