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`; // 根据内容计算高度
    }
  }
}
目录
相关文章
|
5月前
|
JavaScript 前端开发 数据安全/隐私保护
获取焦点后隐藏提示内容的输入框
获取焦点后隐藏提示内容的输入框
55 0
|
11月前
textarea文本框默认显示文本鼠标点击时清空
textarea文本框默认显示文本鼠标点击时清空
|
5月前
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
根据用户是否输入和是否文本框内容为空来决定显示按钮颜色
36 0
layui表单select框同时支持下拉和输入的解决方案
layui表单select框同时支持下拉和输入的解决方案
321 0
|
5月前
uniapp里textarea多行文本输入限制数量
uniapp里textarea多行文本输入限制数量
|
程序员 数据安全/隐私保护
input输入时的边框样式去除
input输入时的边框样式去除
150 0
input输入时的边框样式去除
|
JSON 前端开发 JavaScript
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
|
前端开发
表单label里的文字默认是靠下的,如何靠上对齐?
0df3d7ca7bcb0a468694703e6a63f6246b60af07.jpg 给文本域加一个vertical-align:top;的CSS样式就行了,像这样: 文本域
1610 0
|
开发框架 JavaScript 前端开发