el-input无法输入||自动变成了禁用状态||点击后无法获取焦点

最新推荐文章于 2024-07-25 16:22:53 发布
最新推荐文章于 2024-07-25 16:22:53 发布
阅读量1.9k 收藏
点赞数 2
分类专栏： vue elementUI 文章标签： elementui vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42197013/article/details/121694906
版权

el-input自动变成了禁用状态
el-input无法输入
vue项目中所有 el-input点击后无法获取焦点

突然之间项目所有的input都无法输入，类似禁用状态但不是禁用状态，可以强制获取焦点输入，但无法解决根本问题，

网上任何方法都试了没有用
最后解决方法，卸载elementui重装 更新到最新版本$ npm install element-ui@2.15.7 -S
，重新npm run serve就可以了

记录问题

2021-12-10更新，上面的方法不管用
在最外层的from表单中添加此属性完美解决
@mousedown.native.stop
在这里插入图片描述

温暖的松子
关注
专栏目录
Vue文本域属性＜el-input组件仿clearable，重写清空按钮
Aotman_的博客
08-22 561
Vue文本域属性
解决浏览器自动填充input（适用于elementui）
Equicy的博客
02-24 3545
问题描述 登陆页面浏览器保存账号密码后，浏览器会自动在其他页面进行填充，原因是浏览器会默认填充input type值为password的输入框，即填充对象为input[type=password]即前一个input框。 解决方案 网上也有好多的解决办法，下面列几种，最后我们列出最优的解决方案 autocomplete 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键...
BootStrap模态框和select2合用时input无法获取焦点的解决方法
12-29
在bootstrap的模态框里使用select2插件,会导致select2里的input输入框没有办法获得焦点,没有办法输入. 解决方法: 1. 把页面中的  tabindex=-1  删掉（测试成功）: <div id=myModal class=modal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-header> <button type=button class=close data-di
关于表格里面动态嵌入el-input，无法自动获取el-input 焦点的问题
zz18256889177的博客
04-09 1313
需求：点击添加，生成空白行，表格行里面嵌入el-input。当我点击在运输件数里面点击enter键，下一行的el-input自动获取焦点 原有方法：动态绑定ref,然后通过this.$refs.xxx.focus获取焦点。关键代码 template关键代码： <el-table-column label="运输件数" width="90" align="center"> <template slot-scope="scope">
Vue el-input 中 readonly和disabled的区别详解
最新发布
qq_43071699的博客
07-25 1271
主要区别readonly允许用户选择但不允许修改输入框中的文本，而disabled完全阻止用户与输入框进行任何交互。使用场景readonly更适用于用户需要查看但不需要修改的数据，而disabled适用于需要暂时移除输入框交互能力的情况。视觉反馈disabled输入框在视觉上通常会有更明显的禁用标志，而readonly输入框可能看起来与可编辑的输入框相似，具体取决于浏览器的默认样式和应用的 CSS。
ElementUI框架el-table组件中嵌入el-input输入框无法获取焦点、无法编辑问题
cd_yang2017的博客
03-08 1928
el-table组件中嵌入el-input输入框无法获取焦点，无法编辑。可使用父元素监听方式获取焦点。
element ui 表格里面动态嵌入el-input，无法自动获取el-input 焦点的问题
tyjlearning的博客
06-23 714
1. :id="'input_'+scope.$index" > 2. this.$nextTick(() => { document.getElementById('input_'+index).focus(); },100);
elementUI中input框无法自动聚焦的问题
KasonII的博客
04-11 1213
解决elementUI中的el-table的操作栏嵌套input框后，input框无法自动聚焦的问题
el-input框的focus失效
05-31
1. el-input框被禁用（disabled），导致无法获取焦点。可以通过设置disabled属性为false来解决。 2. el-input框被隐藏（display:none），导致无法获取焦点。可以通过设置display属性为block来解决。 3. el-input框...
去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
09-25
本文主要关注的是如何在谷歌浏览器（Chrome）中处理`input`和`textarea`元素的焦点状态，包括移除默认边框、背景以及禁用文本区域的大小调整功能。 首先，关于`input`和`textarea`的焦点边框，Chrome浏览器会为获得...
超详细 ElementUI 源码分析 —— Input
前端学习博客
03-17 2581
最近在学习 Vue 框架，想深入了解一下组件化开发以及封装组件库的思想，而 ElementUI 作为这方面做的最好的也是最常用的组件库，它的源码一定有很多值得我们去学习的地方，所以去 ElementUI 官网和 Github（来都来了，给个 star） 看了一下，决定边学习组件库边看源码，并把学习中的收获和疑问记录下来，预计会需要很长很长时间才能看完，但是为了提高自（gong）己（zi），还是静下...
Vue Element UI input输入框focus()无法获取焦点
weixin_64663822的博客
05-25 2468
在做后台管理系统的时候需要实现，点击出现input框让后进行修改。 原来的我的代码写成这样。 this.$nextTick(() => { this.$refs.Textinp.focus(); }); 后来我发现，无法获取焦点是因为我使用了show来隐藏input框，导致页面有很多id为Textinp的输入框，把v-show改成v-if就可以解决这个问题 ...
Vue3中Element Plus组件库el-eialog弹框中的input无法获取表单焦点的解决办法
weixin_41292976的博客
07-09 51
以下是vue.js官网给出的示例登录后复制 <script setup> import { ref, onMounted } from 'vue' // 声明一个 ref 来存放该元素的引用 // 必须和模板里的 ref 同名 const input = ref(null) onMounted(() =&...
input框无法获取焦点？nextTick的使用
buterra的博客
05-10 719
页面中的input框显示是受v-show控制的，在执行回调函数时，nput还未显示。回调函数执行完成后，模板才会进行更新，导致input框未获取到焦点。什么时候用：当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行。nextTick的作用：在下一次DOM更新结束后执行其指定的回调。2.使用nextTick解决。
vue解决elementUi中input自动获取焦点失败问题
07-12 2983
在elementUI官网中，有说明input的自动获取焦点属性，但是第一次有效，第二次再展示input时就失效了：最后发现原因是使用了v-if渲染输入框的展示和隐藏，但是当第二次再设置isShowSearch时，渲染动作是异步执行的，没有js执行的快，所以导致自动获取焦点失效第一种利用setTimeout ,也就是我上面使用的方法 setTimeout(()=>{ this.$refs.searchRef.focus(); },0) 第二种：利用 this.$nextTick this.$nextT
HTML中Input输入框提示/设置禁用/自动获取焦点
热门推荐
xiaokangmiclong的博客
10-28 3万+
方法一： 搜索" onfocus="this.value=''" onblur="if(this.value==''){this.value='搜索'}" /> 方法二：<input type="text" placeholder="搜索"  /> 方法三：写js代码： 搜索" /> <script language="JavaScript
当鼠标移到input上时，鼠标变为不可输入的状态 【红色警告】
Java小技巧
08-17 3033
原文地址：http://blog.csdn.net/zl544434558/article/details/21399059 表单不可输入一般用disabled或display=none.但是这样页面并没有变化，所以如果想让鼠标变成红色的警告。就可以用如下属性： [html] view plain copy  print?
Element UI输入框focus()方法自动获取焦点失败处理方法
weixin_45517017的博客
03-27 1万+
Element UI输入框focus()方法自动获取焦点失败处理方法 ​ 本来想通过自定义事件触发输入框，并获取焦点，但是使用官方提示的focus()方法一直失效 后来百度了半天，终于找到一个比较好的处理方法。 ​ 先放对比代码： 刚开始的代码 <el-input v-if="isFormOpened" v-model="scope.row.name" @blur="updateLib"> </el-input> <el
element组件autofocus（ 自动获取焦点）失效
weixin_43923808的博客
06-15 864
【代码】element组件autofocus（ 自动获取焦点）失效。
el-input 无法输入
09-12
el-input无法输入的问题通常有几个可能的原因。首先，可能是由于el-input组件没有绑定双向响应式数据(v-model)导致的。在使用el-input时，需要将输入的值与组件的data进行双向绑定，以确保输入的内容能够正确地显示...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值