Question

我有一个具有textsarea尺寸的CSS属性。我知道如何通过设置行使用javascript调整大小，例如

document.querySelector（'textarea'）。rows =“ 10”;

它完美地工作。现在，当我手动调整textarea的大小，然后尝试使用功能设置行时，它将无法按预期工作。

我已经调试了问题，这是由于高度引起的，当我们手动调整textarea的大小时，它会增加textarea的高度，而当我以编程方式对其进行调整时，它不会增加任何高度，这会引起问题。

有人知道如何解决吗？

这里是示例。点击下面的链接： https://www.w3schools.com/code/tryit.asp?filename=G2O728X99KGS

单击“运行”按钮。

现在单击Resize Me按钮

您可以看到文本区域已调整大小。

现在通过拖动调整大小图标来手动调整文本区域的大小。

最后单击Resize Me按钮，没有任何更改。

Answer 1

那是因为有内联样式属性。因此，在设置行之前删除样式属性

function resizeMe() {
  let elem = document.querySelector('textarea');
  elem.setAttribute("style","");
  elem.rows = "10";
}

<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

<button onclick="resizeMe()">Resize Me</button>

Answer 2

您需要将height设置为auto。尝试下面的代码-

function resizeMe(){
document.querySelector('textarea').rows = "10";
document.querySelector('textarea').style.height = "auto";
}

<textarea rows="4" cols="50">
At w3schools.com you will learn how to make a website. We offer free tutorials in all web development technologies.
</textarea>

<button onclick="resizeMe()">Resize Me</button>

如何以编程方式修复手动调整大小的文本区域

2 个答案: