这里我们在 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
框的文本区域时,不会发生变化..我无法理解为什么。谁能帮我?
但我一直都有这个:
最佳答案
该问题是由于内联样式的高度造成的。我建议使用另一个事件而不是单击(在我的示例中我使用 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>
关于javascript - 通过 vanilla js 更改行数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49427635/