Jquery文本区域自动增长和减少

Question

我想创建一个预装了内容的textarea。当内容存在时，其高度应为auto，但当内容为空时，高度应变为4.2rem。当我在其中输入文本时，应该使用jQuery将高度增加和减少到7.7rem的最大高度。

我该怎么做？

.textAreaGrow {
padding: 1.8rem 0 .8rem;
height: 4.2rem;
max-height: 7.7rem;
}

<textarea class="textAreaGrow">Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</textarea>

Answer 1

这里的技巧是，当用户每次输入文本区域时，文本区域的高度约为0px时，将文本区域的宽度设置为元素的scrollHeight。

我们可以添加另一个if语句来检查文本区域是否为空。如果是，请将高度设置为其初始高度。

$(document).ready(function() {
let txtArea = $('.textAreaGrow');
txtArea.on('input', updateHeight);
function updateHeight() {
let t = txtArea;
if (t.val().trim() == "") {
t.css('height', '4.2em');
} else {
t.css('height', '0.1px');
t.css('height', t[0].scrollHeight);
}
}
updateHeight();
})

.textAreaGrow {
height: 4.2rem;
max-height: 7.7rem;
width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="textAreaGrow">Preloaded text
With newlines too??</textarea>

Answer 2

另一种选择是使用textarea以外的其他元素。然后赋予元素属性contenteditable。这样就更容易控制样式了。但是，你缺乏像textarea这样的形式元素的功能性。因此，这取决于元素应该用于什么。

.textAreaGrow {
border: thin gray solid;
padding: 1.8rem 0 .8rem;
width: 20em;
min-height: 4.2rem;
max-height: 7.7rem;
overflow: scroll;
}

<div class="textAreaGrow" contenteditable>
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.
</div>