textarea高度自动撑开
时间: 2023-09-09 11:08:25 浏览: 85
可以使用以下代码来实现`textarea`的高度自动撑开:
```css
textarea {
overflow: hidden; /* 隐藏滚动条 */
resize: none; /* 禁止拖拽调整大小 */
height: auto; /* 高度自动撑开 */
min-height: 50px; /* 最小高度 */
}
```
其中`min-height`属性可以设置`textarea`的最小高度,当内容较少时,`textarea`的高度也不会太小。而`height`属性设置为`auto`时,`textarea`的高度会根据内容自动撑开。
需要注意的是,当`textarea`中存在多行文本时,若其中一行文本太长,会自动换行,造成高度计算不准确的问题。因此建议使用JavaScript来实现更为精确的自适应高度。可以参考第三方库如:autosize.js。
相关问题
textarea高度自适应
要让textarea的高度自适应,你可以使用以下方法:
1. 使用JavaScript监听textarea的输入事件,每次输入时获取textarea的内容并计算它的高度,然后将textarea的高度设置为计算出的高度。
2. 使用CSS设置textarea的高度为auto,并将其resize属性设置为none,这样textarea的高度将根据内容自适应。
下面是一个示例代码,你可以参考一下:
HTML:
```html
<textarea id="myTextarea" oninput="autoResize()"></textarea>
```
JavaScript:
```javascript
function autoResize() {
const textarea = document.getElementById("myTextarea");
textarea.style.height = "auto";
textarea.style.height = textarea.scrollHeight + "px";
}
```
CSS:
```css
#myTextarea {
height: auto;
resize: none;
}
```
当你在textarea中输入内容时,它的高度将自动适应。
vantui textarea高度
根据提供的引用内容,可以看出这是两种不同的实现方式,一种是使用jquery实现的textarea高度自适应,另一种是使用vantui中的el-input组件实现的。下面分别介绍这两种实现方式:
1. 使用jquery实现的textarea高度自适应
```javascript
$(document).ready(function(){
$('textarea').on('input', function () {
this.style.height = 'auto';
this.style.height = (this.scrollHeight) + 'px';
});
});
```
这段代码使用了jQuery库,当textarea的输入内容发生变化时,会自动调整textarea的高度以适应内容。
2. 使用vantui中的el-input组件实现的textarea高度自适应
```html
<template>
<div>
<el-input
type="textarea"
:rows="3"
placeholder="请输入内容"
v-model="textarea"
autosize
></el-input>
</div>
</template>
<script>
export default {
data() {
return {
textarea: ''
};
}
};
</script>
```
这段代码使用了vantui中的el-input组件,其中的autosize属性可以让el-input组件自动调整高度以适应内容。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)