javascript - 通过 vanilla js 更改行数

Question

这里我们在 html 文件中有一个 textarea

<textarea class="form-control" onClick="do_resize(this)" rows="10" 
cols="150" id ="textvalue" style="margin-top: 0px; margin-bottom: 
0px; height: 316px;">some text </textarea>

在头部上方我有下一种字符串:

function do_resize(textbox) {
    var maxrows=50;
    var txt=textbox.value;
    var cols=textbox.cols;

    var arraytxt=txt.split('\n');
    var rows=arraytxt.length;

    for (i=0;i<arraytxt.length;i++){
        rows+=parseInt(arraytxt[i].length/cols);
    }
    if (rows>maxrows) {
        document.getElementById("textvalue").rows = maxrows
    }else{
        document.getElementById("textvalue").rows = rows
    }
}

当我单击 y textrea 框的文本区域时，不会发生变化..我无法理解为什么。谁能帮我？

我想要这个:

但我一直都有这个:

Answer 1

该问题是由于内联样式的高度造成的。我建议使用另一个事件而不是单击(在我的示例中我使用 Input Event - 当 textarea 元素的值更改时，同步触发 DOM 输入事件)

function do_resize(textbox) {
    var maxrows=50;
    var txt=textbox.value;
    var cols=textbox.cols;

    var arraytxt=txt.split('\n');
    var rows=arraytxt.length;
    for (i=0;i<arraytxt.length;i++){
        rows+=parseInt(arraytxt[i].length/cols);
    }
    if (rows>maxrows) {
        document.getElementById("textvalue").rows = maxrows
    }else{
        document.getElementById("textvalue").rows = rows
    }
}
document.getElementById("textvalue").addEventListener('input', function (evt) {
    do_resize(this);
});

<textarea class="form-control" rows="10" 
cols="150" id ="textvalue" style="margin-top: 0px; margin-bottom: 
0px;">some text </textarea>