从元素输入中填写时自动调整文本区域的大小- Javascript
从元素输入中填写时自动调整文本区域的大小- Javascript
提问于 2019-11-13 03: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-13 04: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-13 03:18:17
我建议将输入的值放入状态。然后根据内容长度计算文本区域的rows属性。
const rows = Math.ceil(this.getFinalSentence().length/TEXTAREA_LINE_LENGTH)
Stack Overflow用户
发布于 2019-11-13 03: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
复制相关文章
相似问题
腾讯云开发者
