javascript - 键入时展开/折叠文本区域并调整行数

Question

好的，我想要实现的目标是:

• 创建只有 1 行行的textarea字段，当您点击enter时，它会为用户再扩展一行
• 当用户从行中删除文本内容时，它会删除多余的行

到目前为止我有这个代码:https://jsfiddle.net/kmo9x3qt/

document.querySelector('textarea').onkeydown = function(e) {
    if(e.keyCode === 13) {
        this.setAttribute('rows', parseInt(this.getAttribute('rows')) + 1);
    }
};

非常简单的想法如何使其自动扩展。我正在努力解决的是如何检测(当用户点击退格键时)是否从最后一行删除了最后一个内容，以便我可以折叠行。

我在堆栈上看到一些主题使用一些内容测量代码，但我不想这样做，这种方法似乎更“稳定”。

Answer 1

尝试使用scrollHeight

document.querySelector('textarea').onkeydown = function(e) {

    if(e.keyCode === 13 || e.keyCode === 8) {
        this.style.height='0px'
        this.style.height = this.scrollHeight+'px'
    }
};

textarea {
    width:300px;
    resize:none;
    border:none;
    outline:none;
    padding:10px;
    background:#dfddde;
    color:#373737;
    margin:0;
    overflow:hidden;
}

<textarea rows="1"></textarea>