element plus中防止textarea字数限制遮挡输入的文字

已于 2023-09-26 11:59:23 修改
阅读量714 收藏
点赞数
分类专栏： vue3 文章标签： javascript vue.js 前端
于 2023-09-26 11:22:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/idanzk/article/details/133301330
版权

我的使用场景：vue3后台

未进行任何处理时，可能会出现下方的遮挡情况

解决方法

首先f12调出我们当前的textarea

使用样式穿透来修改组件样式   

根据输入文字的font-size来调整我们的padding-bottom

.profile {
  //textarea样式
  :deep(.el-textarea__inner) {
    padding-bottom: 16px;
  }
}

效果如下

问题解决

Vue3+ElementPlus el-input textarea类型 label垂直居中
朝花夕拾的博客
06-06 1391
【代码】Vue3+ElementPlus el-input textarea类型 label垂直居中。
Textarea输入字数限制实例(兼容iOS&安卓)
08-30
首先，我们要明确`<textarea>`是HTML中用于创建多行文本输入的元素，通常用于收集用户的大段文字输入，如评论、反馈或表单中的长文本描述。为了限制用户输入的字符数，我们可以利用JavaScript事件监听器来实时检查并...
Element Plus 文本域设置固定行数
前端小陈的成长记录
03-18 1222
Element Plus 文本域设置固定行数
Vue学习之Element-Plus
最新发布
2403_87489840的博客
01-14 435
对于element-plus中的组件，可以访问官网去快速找到其的书写格式下面对其进行简单介绍。
el-texteara字数过多会遮挡住限制文字的字数
dy1717的博客
09-30 1164
el-texteara输入文字遮住限制字数解决方法
【element-ui】 textarea输入框数据统计遮挡输入文字
hippyoo的博客
01-10 2234
解决方案：背景透明色，文字放到右下角
Vue el-input 为textarea 显示字数会把内容挡住
qq_42753983的博客
05-19 1208
【代码】Vue el-input 为textarea 显示字数会把内容挡住。
[element-ui]el-input textarea控件字数统计遮挡正文内容
weixin_44478258的博客
12-06 502
网上大部分的解决方案是把这个字数统计移到输入框外面（设置绝对定位的bottom值为负数，比如-32px），或者直接给一个固定的高度。前者会改变ui，得说服产品接受，而后者每次都需要预判它的最大高度。element-ui的多行文本控件，在设置show-word-limit时，输入框右下角会有一个字数统计，会把正文挡住。以下解决方案是在每次输入时都重新计算一次高度，每次输入时，最下面都会留一定高度来展示字数统计内容。
js实现textarea限制输入字数
12-09
实现textarea限制输入字数（包含中文只能输入10个，全ASCII码能够输入20个） textarea称文本域，又称文本区，即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。与单行文本框text控件不同，它不能通过...
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
10-28
在本例中，使用了jQuery这一流行的JavaScript库来实现对textarea元素中文字字数的限制。 jQuery库能够简化HTML文档遍历、事件处理、动画和Ajax交互的代码编写。它提供了一套丰富的方法和函数，使得操作DOM元素、...
jQuery textarea文本框输入文字字数限制提示代码.zip
07-11
js代码 [removed] //显示限制输入字符method function textAreaChange(obj){ ... var count_total = $this...jQuery textarea文本框输入文字字数限制提示代码，设置固定输入字符，实时计算显示已经输入多少字符。
element-ui—textarea多行输入框—字数限制及优化
m0_37616866的博客
06-26 4728
【代码】element-ui—textarea多行输入框—字数限制及优化。
element ui 文本域el-textarea的计数限制不遮挡输入的文字
锦瑟年华L的博客
11-29 6967
element ui 文本域el-textarea的计数限制不遮挡输入的文字
element UI 设置type=“textarea“ 禁止输入框缩放
马优晨
04-10 2433
时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，您需要使用 CSS 来覆盖默认的浏览器行为。时，默认情况下，用户可以通过拖动输入框的右下角来调整其大小。如果您想禁止这种缩放行为，需要使用 CSS 来覆盖默认的浏览器行为。：如果您在单文件组件中使用 Vue，并希望仅在该组件中应用此样式，可以使用 scoped CSS。确保这个 CSS 规则在 Element UI 的样式之后加载，以确保它可以正确地覆盖默认样式。注意上图，第一张是可以缩放的，第二章不能缩放的。
Element plus .el-textarea__inner 样式重构
bigcarp的专栏
05-25 617
style上添加scoped属性，就相当于给当前子组件的结构中都添加上一个data-v-×××自定义属性。去掉scoped 也可以实现样式重构。以下有效，使用 >>> 深度选择器。使用深度穿透也可以处理这个问题。分析scoped的使用用法。深度选择器可以实现样式穿透。原生CSS： >>>
Element Plus 设置文本域高度
qq_43709352的博客
09-14 437
【代码】Element Plus 设置文本域高度。
Vue+Element-UI label文字被遮住被挡住解决方法
Hhbdxww的博客
12-21 916
方法二：在组件设置中找到标签宽度，加一个合适的值就可以了。这样就可以不改变标签的位置来实现。方法一：在表单设置栏中找到字段标签位置，选择顶部，通过改变位置来解决。如图，由于标签文字太长标签中的music被输入框挡住了。
固定element-plus组件中文本域（textarea）高度
Aeolus_silence的博客
02-18 2222
textarea文本域高度的固定
vue3+elementplus去掉el-input 和 el-textarea的border
li222248的博客
12-30 2471
【代码】elementplus去掉el-textarea 和 el-textarea的border。
实现jQuery textarea字数限制提示的代码示例
资源摘要信息:"本资源包含了一个使用jQuery实现的textarea文本框输入文字时字数限制提示的js代码。该代码主要通过JavaScript和jQuery来实现对textarea文本框的字符数进行限制，并实时显示剩余可输入字符的数量。代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值