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>

Answer 2

试试此代码：https://plnkr.co/edit/teZXdtA55JqZq9v0umdD?p=preview

供参考：

<!DOCTYPE html>
<html>
<body>
<textarea class="form-control" onkeyup="do_resize(this)" rows="2" cols="15" id ="textvalue">some text </textarea>
<script>
function do_resize(textbox) {
    var maxrows=50;
    var txt=textbox.value;
    var cols=textbox.cols;

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

    console.log(arraytxt)
    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
    }
}
</script>
</body>
</html>

用vanila js改变行数

2 个答案: