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,然后在该方法里手动计算文本框的高度并实现自适应:文章来源地址https://www.toymoban.com/news/detail-813289.html

methods: {
  autoAdjustReviewInput() {
    const textArea = this.$refs.reviewInput.$refs.textarea; // 获取 el-input 组件中的 textarea 节点
    if (textArea) {
      textArea.style.height = 'auto'; // 先将高度设置为自适应
      textArea.style.height = `${textArea.scrollHeight}px`; // 根据内容计算高度
    }
  }
}

到了这里,关于textarea文本框根据输入内容自动适应高度的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html+css+Jquery 实现 文本域 文字数量限制、根据输入字数自适应高度

    先看效果:初始的效果,样式多少有点问题,不重要!重要的是功能! 输入后: 根据文字长度,决定文本域长度 + 限制文字数量 1 .样式请自行调整! 2 .此处代码为了方便测试,使用的是线上的jquery地址,使用时,请更换自己的路径地址!

    2024年02月02日
    浏览(11)
  • <el-input> textarea文本域显示滚动条(超过高度就自动显示)+ <el-input >不能正常输入,输入了也不能删除的问题

    需求:首先是给定高度,输入文本框要自适应这个高度。文本超出高度就会显示滚动条否则不显示。 参考文章 问题二: 加入这个,@input=“change($event)” 参考文献 参考文献(问题更全)

    2024年02月07日
    浏览(17)
  • AICG,人工智能自动生成内容——根据文本生成图像,视频,音频

    1、什么是AICG? 什么是AICG? AICG是指人工智能自动生成内容。 通过算法模型,将文本转化为图像、音频、视频等多种形式。 在数字时代,AICG已经成为各种领域中不可或缺的一部分。 AICG的应用场景 AICG在数字营销、广告制作、电影制作等领域广泛应用。 可以用于教育、娱乐

    2024年02月14日
    浏览(16)
  • vue Element UI table表格根据内容长度自适应列宽(af-table-column解决)

    支持自适应列宽功能, 使用方法如下: 安装 引入 使用在需要自适应的列上使用即可 使用前效果 使用后效果

    2024年02月14日
    浏览(11)
  • 微信小程序文本输入<textarea/> 详解

    也许你迷茫,但是我想说,在你迷茫的同时,保持本心,过好今天就好。 在微信小程序开发中,input 用来实现文本输入,是单行的,textarea是多行的输入实现 1 基本使用 基本效果就是显示了一个多行的文本输入框。 placeholder 输入框为空时的占位符 auto-focus 自动聚集,拉起键

    2024年02月09日
    浏览(15)
  • div标签改写textarea,实现部分文本内容标红

    示例 div本来是没有focus和blur事件的,正常情况下无法获得焦点,解决方案如下: 如果用div来模拟一个texarea标签,同时需要它和texarea一样响应focus和blur事件,就需要给他加上attribute:tabindex; 只要元素的tabIndex属性设置成任何有效的整数那么该元素就能取得焦点。元素在取得

    2024年01月17日
    浏览(10)
  • Unity 代码控制Text自适应文本高度

    在使用代码给Text赋值时,且文本有多段,并需要根据实际文本高度适配Text组件的高度时,可以使用以下方法: 设置前: 文本超出了组件框了。 设置后: 文本有多高,组件就有多高。

    2024年02月03日
    浏览(14)
  • 前端Vue uni-app简单实用通用标签栏自动换行 自适应高度 可设置行数 可改标签颜色

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月05日
    浏览(27)
  • css自适应高度或宽度,超出内容显示滚动条

    有时候项目中使用了flex布局,高度或是宽度是自动填满剩余空间,不是具体的数值的时候,想要设置区域滚动条,可采用以下方法设置:

    2024年02月13日
    浏览(12)
  • Android根据TextView的文本大小计算其宽度和高度

    Android根据TextView的文本大小计算其宽度和高度 在Android开发中,TextView是常用的UI组件之一,用于显示文本内容。有时候我们需要根据TextView的文本大小来动态计算其宽度和高度,以便适应不同长度的文本内容。本文将介绍如何使用Java代码来实现这一功能。 首先,我们需要获取

    2024年02月02日
    浏览(16)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包