我正在学习CSS。我有一个包含灵活文本区域的 div。现在我希望当用户在textarea中输入多行内容时，textarea和外层div自动扩展高度，并且当textarea超过3行时，停止扩展并滚动textarea。我应该如何编写 CSS？
渲染代码：
.outerdiv {
height: auto;
display: flex;
}
.outerdiv textarea {
height: 100%;
flex-grow: 1;
}
<div class="outerdiv">
<textarea></textarea>
</div>
我不认为有CSS解决方案。
然而这个 JS 有点做你想要的：
function updateTextarea() {
var textarea = document.getElementById("textarea");
// Get line height of the textarea
var lht = parseInt($('textarea').css('lineHeight'),10);
// Get lines
var scrlht = textarea.scrollHeight;
var lines = Math.floor(scrlht / lht);
if (lines < 4) {
textarea.style.height = '15px'
textarea.style.height = (lines * lht) + 'px'
}
}
textarea {
line-height: 15px;
height: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<textarea id='textarea' oninput="updateTextarea()"></textarea>
</div>
删除文本时它不会使 texarea 变小。但当你打字时它确实会增长。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
