textarea行数自适应代码
时间: 2023-07-03 09:04:26 浏览: 99
jquery实现textarea 高度自适应
以下是使用JavaScript实现textarea行数自适应的示例代码:
```html
<textarea id="myTextarea" oninput="autoResize()" placeholder="输入内容"></textarea>
```
```javascript
function autoResize() {
const textarea = document.getElementById("myTextarea");
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
}
```
在这个示例中,我们首先在HTML中定义了一个textarea元素,并为其指定ID和占位符文本。然后,在JavaScript中我们定义了一个名为`autoResize`的函数,该函数会在textarea的输入事件触发时被调用。在该函数中,我们首先获取textarea元素的引用,然后将其高度设置为`auto`,以便在测量其内容尺寸之前将其重置为默认高度。接下来,我们将textarea的高度设置为其内容高度加上一个像素,以便在多行文本的情况下正确展示所有文本。
需要注意的是,这个示例中的代码只适用于单个textarea元素,并且如果你需要在网页中使用多个textarea元素时,你需要对每个元素都复制并修改这些代码。
阅读全文