Vue中的input输入框无法输入

最新推荐文章于 2024-03-20 10:18:21 发布
最新推荐文章于 2024-03-20 10:18:21 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dilemma_me/article/details/113886894
版权

Vue中的input输入框无法输入

Vue中的input输入框无法输入
刚开始以为是键盘的问题，然后发现别的地方都可以输入，唯独这个input无法输入，可能因为我循环嵌套了三次，太深入无法渲染

 <el-input     
  v-model="desc"
     type="textarea"
     @input="change($event)"
  />


change(e) {
   this.$forceUpdate()
},
Archer_yy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue element-ui input=textarea无法输入的问题
Codernmx
02-05 4202
无法输入，是因为element-ui textarea 存在maxlength和minlength属性，刚刚更换了原生textarea，就不会出现不能输入的问题了。 项目中要用到textarea这种输入框，用的是element-ui，然而<el-input type="textarea"></el-input>无论怎样输入，都无法输入，如果要继续使用element的样式，可以用html原生的textarea元素，然后引用element的样式el-textarea__inner，加上
input框不能输入
weixin_39347470的博客
09-13 5323
1，首先看input框能不能获取光标，如果光标不能获取，可能是有遮盖层，或者设置了input的属性之类的，要检查清楚，如果有遮盖层一般都是定位的原因，要检查z-index 2，如果能获取光标，只有某种类型的不能输入，要检查代码里是否存在正则验证和type的类型 3，如果以上两种情况都没问题，还有就是看看文件里有没有监听键盘事件例如：keydown，keyup，keypress等，看看是否阻止了默认事件，比如使用了preventDefault()，这个时候一定要检查清楚 如果input的出现了不能输入的情况，
解决el-input无法输入的问题和表单验证失败问题
最新发布
qq_52126119的博客
03-20 965
1、在el-input组件中使用v-model进行双向数据绑定 2、有时，你会发现我们进行了双向数据绑定了，但是el-input还是无法输入，我们就要使用绑定input事件，然后使用$forceUpdate方法强制刷新，这样子会解决我们el-input无法输入问题，但是这会带出一个新的问题，那就是表单无法进行验证等一些问题。 3、使用$forceUpdate方法强制刷新 ，表单验证失效（表单已经输入值，表单验证显示为空）， 由于此次表单是动态添加的，rules也需要动态添加
vue el-input 输入框输入不了
qq_45327886的博客
08-16 9605
el-input无法输入
vue中输入框无法输入问题
zsm__zsm的博客
03-31 1296
vue中输入框无法输入问题
css不可修改,css怎么设置text不可编辑
weixin_31668621的博客
08-04 984
css设置text不可编辑的方法：1、通过“οnfοcus=this.blur()”方法设置text不可编辑；2、使用readonly属性设置输入字段为只读；3、使用disabled属性设置禁用input元素即可。本教程操作环境：windows7系统、HTML5&&CSS3版本、Dell G3电脑。推荐：css视频教程设置text不可编辑的方法方法1： οnfοcus=this.b...
Vue Element ui input无法输入问题原因及彻底解决
qq_23490959的博客
06-19 4308
【代码】Vue Element ui input无法输入问题原因及彻底解决。
vue输入框无法输入或延迟输入的问题
qq_40283211的博客
09-14 699
vue有时候会碰到输入框无法输入的问题，甚至只有当下一个输入框输入的时候，前一个输入框才会有反应，这往往是因为v-model层级过多，render函数无法自动更新，因此这时候需要我们手动强制刷新。下拉框有时也会出现同样的问题，我们同样可以添加@change时间对下拉框的内容强制刷新。这样，输入框就可以及时响应了。
ios系统上input输入框无法输入值的解决办法
u011286552的博客
12-30 1377
本文转自：https://blog.csdn.net/weixin_43642423/article/details/83863847 有好多做手机端网页开发的朋友常常遇到这种问题,就是苹果系统不能在输入框输入值 只要在input 上面加上css样式-webkit-user-select:text !important 或者在父类加上这个样式就可以了 ...
input不能输入的问题
qq_43654065的博客
10-08 8146
转载：input框不能输入问题 今天就很神奇，input框不能输入！就很奇怪，百度了一下，发现是为了解决盒子直接的空隙问题，把fon-size设置为了0。。。不能友好玩耍了。下面是百度的几种input不能输入的原因。 1. input框设置了readonly属性 这个就很好理解了，readonly属性把input框设置成了只读，就不可以输入了。 <input type="text" readonly="readonly" placeholder="这是一个只读框"/> 只读字段是不能
uview2.0 u--input 解决键盘弹起时,输入框提示文字也被推上去的问题
oneya1的博客
10-20 2709
1.问题图片 由于uview的u–input组件默认在键盘弹起时，自动上推页面,所以导致。2.解决方法 将adjustPosition设置为fakse。
使input文本框不可编辑的3种方法
热门推荐
u010210251的博客
11-08 16万+
今天试了一下使input文本框不可编辑的3种方法，现在总结一下： disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与 一起使用。 示例： readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切
使用Vue表单时输入框无法输入文字
Lcynsyw的博客
03-06 3488
使用Vue表单时输入框无法输入文字
Vue+element ui中el-input无法输入问题
Coludidi的博客
07-22 9913
el-select和el-input无法输入问题
移动端input框，调起输入法却无法输入内容
我说我是学霸你信吗的博客
05-07 810
主要是webkit-user-select:none 导致 input 框无法输入，将属性值修改为text就可以了 input { user-select: text; -webkit-user-select: text; }
使用Vue框架，发现输入框＜input＞或者＜el-input＞的内容无法修改，也无法输入。
lingrer的博客
11-09 1117
使用Vue框架，发现输入框<input>或者<el-input>的内容无法修改，也无法输入。forceUpdate用来强制渲染，避免data中对象层次太深，Vue框架不自动渲染的情况。首先，检查绑定方式，应该使用v-model，有时候会误用:value，导致无法修改。
解决vue2升级vue3后，输入框无法输入的问题
一只没有脚的鸟
11-15 1060
vue2升级为vue3的语法，前端代码原封不动的复制过来，结果测试的时候发现在输入框中无法输入，介绍两种解决方法
vue .input赋值之后input框无法输入，或者和其他input框错位，校验延迟
weixin_42575505的博客
01-10 1897
如果在 Vue 中使用 v-model 指令给 input 框赋值之后，input 框无法输入或者和其他 input 框错位，有可能是因为 v-model 指令在给 input 框赋值之前导致了错误。 这种情况常常发生在在父组件和子组件之间传递数据时，由于数据在父组件和子组件之间的渲染延迟导致的。 要解决这个问题，可以使用 v-model.lazy 指令，或者在赋值时使用 $nextTick 方法...
vue中input输入框不输入内容输入框变红且提示文字实现列子
06-02
您可以使用 Vue 的数据绑定和计算属性来实现这个功能。具体实现步骤如下： 1. 在 Vue 的 data 中定义一个变量，用于存储 input 输入框的值。 ``` data() { return { inputValue: '' } } ``` 2. 在 input 输入框中绑定这个变量，并添加一个 change 事件。 ``` <input type="text" v-model="inputValue" @change="checkInput"> ``` 3. 在 methods 中定义 checkInput 方法，用于检查输入框的值是否为空。如果为空，将提示文字变成红色，并在提示文字中显示错误信息。 ``` methods: { checkInput() { if (this.inputValue === '') { this.$refs.errorMsg.style.color = 'red'; this.$refs.errorMsg.innerHTML = '输入框不能为空'; } else { this.$refs.errorMsg.style.color = 'black'; this.$refs.errorMsg.innerHTML = ''; } } } ``` 4. 在模板中添加一个 span 元素，用于显示错误信息，并添加一个 ref 属性，用于在 checkInput 方法中引用这个元素。 ``` <span ref="errorMsg"></span> ``` 5. 在计算属性中定义一个变量，用于控制提示文字的显示和隐藏。 ``` computed: { showErrorMsg() { return this.inputValue === ''; } } ``` 6. 在模板中绑定这个变量，并根据其值显示或隐藏提示文字。 ``` <span v-show="showErrorMsg" style="color: red">输入框不能为空</span> ``` 完整的代码如下： ``` <template> <div> <input type="text" v-model="inputValue" @change="checkInput"> <span ref="errorMsg" v-show="showErrorMsg" style="color: red"></span> </div> </template> <script> export default { data() { return { inputValue: '' } }, methods: { checkInput() { if (this.inputValue === '') { this.$refs.errorMsg.style.color = 'red'; this.$refs.errorMsg.innerHTML = '输入框不能为空'; } else { this.$refs.errorMsg.style.color = 'black'; this.$refs.errorMsg.innerHTML = ''; } } }, computed: { showErrorMsg() { return this.inputValue === ''; } } } </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值