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`; // 根据内容计算高度
    }
  }
}
目录
相关文章
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
获取焦点后隐藏提示内容的输入框
获取焦点后隐藏提示内容的输入框
30 0
|
5月前
textarea文本框默认显示文本鼠标点击时清空
textarea文本框默认显示文本鼠标点击时清空
|
3月前
|
Web App开发 小程序 Android开发
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
Uniapp from 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker
34 0
|
8月前
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
输入框贴贴去除样式并插入到指定光标位置(contenteditable=“true“ 实现的输入框也支持)
63 0
|
4月前
uniapp里textarea多行文本输入限制数量
uniapp里textarea多行文本输入限制数量
|
9月前
|
程序员 数据安全/隐私保护
input输入时的边框样式去除
input输入时的边框样式去除
input输入时的边框样式去除
|
JSON 前端开发 JavaScript
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
常用input输入框的行内验证
只能输入正整数 <input type="text" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.
1343 0
|
前端开发
表单label里的文字默认是靠下的,如何靠上对齐?
0df3d7ca7bcb0a468694703e6a63f6246b60af07.jpg 给文本域加一个vertical-align:top;的CSS样式就行了,像这样: 文本域
1561 0

热门文章

最新文章