vue element-ui input=textarea无法输入的问题

最新推荐文章于 2024-06-27 10:20:38 发布
最新推荐文章于 2024-06-27 10:20:38 发布
阅读量4.4k 收藏 2
点赞数
分类专栏： Element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31754591/article/details/113679249
版权

无法输入，是因为element-ui textarea 存在maxlength和minlength属性，刚刚更换了原生textarea，就不会出现不能输入的问题了。
在这里插入图片描述
项目中要用到textarea这种输入框，用的是element-ui，然而<el-input type="textarea"></el-input>无论怎样输入，都无法输入，如果要继续使用element的样式，可以用html原生的textarea元素，然后引用element的样式el-textarea__inner，加上class，就一样了。
在这里插入图片描述

codernmx
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Element Input输入框的使用方法
10-15
主要介绍了Element Input输入框的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue实现动态显示textarea剩余字数
08-30
主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
解决微信小程序使用textarea输入框 type=“textarea“ 文本输入限制问题
最新发布
weixin_45776545的博客
06-27 449
【代码】解决微信小程序使用textarea输入框 type=“textarea“ 文本输入限制问题。
el-input textarea 无法输入内容、就像被锁住了
好好学习，不断总结
11-06 2938
el-input textarea 无法输入内容、就像被锁住了 现象 输入法是可以体现出来的，但是输入完内容就是不进框里面 环境和版本 本文使用的vue和element-ui版本（其它老版本不一定会出现这个问题） “vue”: “2.6.12” “element-ui”: “2.15.1” 解决方案 <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 5}" v-model="temp.content"/> 造成的原因是没有
vue element-ui el-input=textarea无法输入问题
CHIHIRO1023的博客
07-15 1140
el-input=textarea无法输入问题
element-ui 关于type= “textarea“ 输入框输入不进去任何字符
m0_64707449的博客
02-02 2971
如上图所示，用原生的textarea,引用element-ui自带的样式属性即可解决。造成无法输入的原因是：textarea存在maxlength和minlength属性。
elementui里input type=“textarea“无法输入及提示校验信息
E_li_na的博客
09-18 4948
场景1:是这样的，input 写在el-dialog里面，根据另一个字段决定要不要显示这个input。新增和修改用的都是这个dialog。新增的时候input框输入后没有提示校验信息；但是，修改的时候，如果修改的是让另一个字段使得这个input从隐藏改成显示，然后在这个input里输入值后，不会在input框里显示值，但是查看data里是有值的。 原因：出现这种情况时因为视图没有更新。 解决办法：网上说的解决办法有添加@input事件。我按照要求添加了@input事件后，然后强制更新this.$forceU
elementUI 输入框 type=“textarea“无法输入问题
weixin_55165609的博客
06-05 1789
<el-input v-model="soldOutInfo.supplyAdvice" type="textarea" placeholder="建议" maxlength="150" show-word-limit > </el-input>
小程序u-input中textarea类型增加行高
qq_41892764的博客
12-10 2132
利用 custom-style 参数传入带 lineHeight 的 object对象 改变行高 <u-input placeholder="请输入消息内容" v-model="model.content" type="textarea" :height="500" :customStyle="{lineHeight: '36px'}"/>
uni-app组件总结一：input和textarea，以及textarea显示在最上面的解决方案
weixin_44060609的博客
05-26 1万+
uni-app colorui组件总结一inputtextareatextarea组件在微信小程序属于原生组件处于最高级 （苹果和开发工具上是正常的，安卓是一直显示在最上面）解决方法一 cover-view解决方法二 亲测 input html <view class="cu-form-group "> <view class="title">姓名</view> <input placeholder="请输入姓名" type="text" :val
vue + el-input 中 textarea 实现 placeholder 换行
06-14
在Vue.js项目中，Element UI 是一个常用的设计组件库，提供了丰富的UI组件，包括`el-input`，这个组件可以用来创建输入框。当涉及到多行文本输入时，`textarea`元素通常会比`input`更合适。在这个场景下，我们可能会...
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
`<el-input type="textarea">`用于多行文本输入。 7. **表单提交处理**：在对话框底部，`<el-button>`用于取消编辑和提交表单。`@click.native`事件绑定`editSubmit`方法，这个方法应负责验证数据，然后向后端发送...
VUE-消息提示框.docx
12-10
本文档主要介绍了在 Vue 框架中使用 Element UI 实现可输入多种格式内容的消息提示框，并且新增了消息提示校验和抛出校验的错误信息。 Vue 消息提示框背景介绍 在 Vue 框架中，消息提示框是一种常见的交互方式，...
el-input输入框无法输入问题
热门推荐
Giraffe0615的博客
08-24 1万+
el-input输入框无法输入问题
el-input textarea输入框 字体英文输入问题、回车提交、ctrl+enter换行等问题
yongyafang123的博客
02-26 3842
el-input 回车键、字体输入问题
Vue + ElementUI el-input无法输入、修改、删除的问题
SunshineGGB的博客
12-29 6253
vue强制更新vm.$forceUpdate()，vue+elementui保存数据后信息框数据无法更新删除的问题
uview input框textarea模式，输入区域没有高度问题记录。
A_Brave的博客
07-14 5858
问题 使用uview的输入框textarea，设置高度后，点击红框下的区域无法获取到输入焦点，如下图 解决方案 auto-height设置为false，默认为true 是自动增加输入高度 ，不会和height属性设置的高度同步（下图2） auto-height设置为false就可以了 <u-input v-model="presentation" type="textarea" border height="300" :auto-height="false" /> ...
<el-form-item label="质检备注"> <el-input type="textarea" v-model="dataForm.remark" maxlength="100" placeholder="请输入内容" show-word-limit style="width: 70%;min-height: 132px;" ></el-input> </el-form-item> vue 和 element-ui实现补全修改代码，需求是代码原有基础上 将el-input最低高度为132px,出现框的样式和高度不匹配
05-24
你可以通过给 `el-input` 的外层包裹一个 `div` 元素，并设置该元素的高度为 132px，从而实现 `el-input` 的最低高度为 132px。代码示例如下： ``` <el-form-item label="质检备注"> <div style="height: 132px;"> <el-input type="textarea" v-model="dataForm.remark" maxlength="100" placeholder="请输入内容" show-word-limit style="width: 70%;min-height: 132px;"></el-input> </div> </el-form-item> ``` 如果出现框的样式和高度不匹配，你可以通过修改 `el-input` 的样式来解决。比如，你可以添加如下的样式来设置 `el-input` 的出现框的最小高度为 132px： ``` .el-input__inner { min-height: 132px; } ``` 将这段样式添加到你的 CSS 文件中或者在 `style` 标签中添加即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

codernmx

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值