textarea文本框根据输入内容自动适应高度

简介: textarea文本框根据输入内容自动适应高度

第一种:

<el-input auto-complete='off' type='textarea' 
    :autosize="{minRows:3,maxRows:10}" 
    class="no-scroll">
</el-input>
/* 页面的样式表 */
.no-scroll textarea {
  overflow: hidden; /* 禁用滚动条 */
  resize: none; /* 禁止用户手动调整文本框的尺寸 */
  height: auto !important; /* 强制将高度设置为自适应 */
  max-height: none !important; /* 禁用最大高度限制 */
}


第二种:

<el-input auto-complete='off' type='textarea' 
     ref="reviewInput" 
    @input="autoAdjustReviewInput">
</el-input>


加一个监听该文本框内容变化的方法 oninput,然后在该方法里手动计算文本框的高度并实现自适应:

methods: {
  autoAdjustReviewInput() {
    const textArea = this.$refs.reviewInput.$refs.textarea; // 获取 el-input 组件中的 textarea 节点
    if (textArea) {
      textArea.style.height = 'auto'; // 先将高度设置为自适应
      textArea.style.height = `${textArea.scrollHeight}px`; // 根据内容计算高度
    }
  }
}
目录
相关文章
|
1天前
|
JavaScript 前端开发 数据安全/隐私保护
获取焦点后隐藏提示内容的输入框
获取焦点后隐藏提示内容的输入框
34 0
|
6月前
textarea文本框默认显示文本鼠标点击时清空
textarea文本框默认显示文本鼠标点击时清空
|
1天前
uniapp里textarea多行文本输入限制数量
uniapp里textarea多行文本输入限制数量
|
前端开发 测试技术
Easyui datagrid 设置内容超过单元格宽度时自动换行显示
Easyui datagrid 设置内容超过单元格宽度时自动换行显示
279 0
|
JSON 前端开发 JavaScript
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
|
数据安全/隐私保护
EasyUI–常用控件之按钮/搜索框/密码框/文件框/数字框/日期时间选择框
本篇主要介绍跟后台数据绑定相关度不大的简单控件,直接写了一个详细的例子,需要说明的东西都在注释里面。
568 0
EasyUI–常用控件之按钮/搜索框/密码框/文件框/数字框/日期时间选择框
常用input输入框的行内验证
只能输入正整数 <input type="text" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.
1344 0
|
前端开发
表单label里的文字默认是靠下的,如何靠上对齐?
0df3d7ca7bcb0a468694703e6a63f6246b60af07.jpg 给文本域加一个vertical-align:top;的CSS样式就行了,像这样: 文本域
1567 0