Javascript 更改vanila js的行数_Javascript

Javascript 更改vanila js的行数

javascript

Javascript 更改vanila js的行数,javascript,Javascript,这里我们在html文件中有一个文本区域 <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

这里我们在html文件中有一个文本区域

<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文本框的文本区域时，不会改变。。我不明白为什么。谁能帮我

我想买这个：

但我一直都有这个：

问题是由于内联样式的高度。在我使用的示例中，我建议使用另一个事件，而不是单击- 当textarea元素的值更改时，将同步触发DOM输入事件函数do_resizetextbox{ var maxrows=50； var txt=textbox.value； var cols=textbox.cols； var arraytxt=txt.split'\n'； var rows=ArrayText.length；对于i=0；imaxrows{ document.getElementByIdtextvalue.rows=maxrows }否则{ document.getElementByIdtextvalue.rows=行 } } document.getElementByIdtextvalue.addEventListener'input'，函数evt{ 做这件事； }; 一些文本请尝试以下代码：

供参考：

<!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>

您是否得到任何控制台错误？if子句没有做任何事情，因为rows=rows？您想要什么？单击时更改行？从样式中删除高度并确保在正文中声明该函数。如果从文本区域中删除高度CSS，则当前代码工作正常，这将覆盖行属性。