input聚焦失效Autofocus processing was blocked because a document already has a focused element.

于 2021-03-23 11:40:41 发布
阅读量1.1w 收藏 1
点赞数 2
分类专栏： 前端开发 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/115114677
版权
当页面有多个el-input时，ElementUI的autofocus属性可能不起作用。一种解决方案是在点击事件中手动调用focus方法，例如`this.$refs[id][0].focus()`，注意这里需要选取数组的第一个元素。另一种方法是检查文档的聚焦元素，避免冲突。这个博客提供了具体的代码示例和注意事项。
摘要由CSDN通过智能技术生成

 

Autofocus processing was blocked because a document already has a focused element.

场景：

因为页面有多个el-input

解决办法：

我是这样做的：

 <el-input
              v-else
              v-model="item.sentence"
              :ref=" 'input'+ item.id "
              placeholder="请输入内容"
              autosize
              @click.native="changeContentData(item)"
              @blur="item.ifInput=false"
              @change="saveChangeSingleContentChecked(item)"
            ></el-input>



    changeContentData(data) {
      console.log('里面输入框被点击了')
      console.log(data)
      console.log(data.sentence)
      let id = 'input' + data.id
      console.log(this.$refs[id])
      this.$refs[id][0].focus()
    },

温馨提示：

这里的

this.$refs[id][0].focus()数组需要选中第0个索引才行

其他办法：

ElementUI的 input 的属性 autofocus(自动获取焦点) 失效_一方湖泊-CSDN博客_element input 自动获取焦点

南北极之间
关注
专栏目录
element-ui中input组件的autofocus自动聚焦不生效
shi15926lei的博客
04-19 3301
所以对于你在模态框中使用 el-input,autofocus 不生效的问题,使用 $nextTick 手动触发 focus 方法是一种很好的解决方案。4. modal/dialog 等组件打开时,原页面的 DOM 会被销毁重建,此时 autofocus 也会失效。如果是在移动设备上访问,autofocus 不会生效。3. autofocus 需要在 DOM 渲染完成后生效,如果 DOM 还没有加载完成,则不会生效。通过这种方式,无论是什么情况,都可以成功触发输入框的聚焦。
element el-input的autofocus失效问题解决
weixin_30907523的博客
12-05 1851
autofocus是input的原生属性,饿了么组件也支持这种方法, 但是input外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法 转载于:https://www.cnblogs.com/Shysun/p/10072126.html...
el-input组件自动聚焦（autofocus）事件失效
yurisa1994的博客
03-04 3982
问题描述： 提示：vue项目中，element ui el-input组件自动聚焦（autofocus）事件失效 原因是input元素外部有其他元素 <el-input placeholder="请输入搜索内容" ref="searchBox" ></el-input> created() { this.getList() this.$nextTick(() => { this.$refs.searchBox.focus() })
autofocus——打开页面，自动获得光标的焦点
飞一样的编程
06-03 8100
autofocus,打开页面，自动获得光标的焦点，适用于当前页面的文本框，按钮或其他，第一优先级的
element的autofocus失效问题解决
yiyueqinghui的博客
04-09 1万+
原因： autofocus是vue中input的原生属性,element也支持这种方法, 但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。 方法： 绑定ref <el-input ref="myNameId" v-model="form.name" /> this.$refs.myNameI...
快速解决element的autofocus失效问题
10-14
总的来说，解决 Element UI 中 `autofocus` 失效的问题，关键在于理解 Vue 的组件结构和生命周期，以及如何利用 `ref` 和自定义指令进行元素操作。正确应用这些技术，可以确保在页面加载后自动聚焦指定的输入框，...
vue-autofocus-directive-Vue自动聚焦指令。-Vue.js开发
05-27
从官方Vue教程中获取Vue About Lifted的vue-autofocus-directive自动聚焦指令：https://vuejs.org/v2/guide/custom-directive.html当从官方Vue中获取关于Vue About的vue-autofocus-directive-directive自动聚焦指令...
HTML5 自动聚焦(autofocus)属性使用介绍
09-28
HTML5的自动聚焦(autofocus)属性是一个非常实用的功能，它允许开发者在网页加载完毕后立即让某个输入元素（如input、textarea或button）自动获得焦点，无需使用JavaScript进行额外的操作。这一特性大大简化了网页...
SARAutoFocus.rar_PGA_autofocus matlab_radar_成像_自聚焦成像
07-14
《基于Matlab的雷达SAR成像自聚焦算法详解》 在雷达信号处理领域，合成孔径雷达（Synthetic Aperture Radar，简称SAR）成像技术是一项至关重要的技术，它能够实现远距离、高分辨率的目标成像。然而，由于实际的传输...
Vue后台项目知识点总结
探鱼不是鱼
12-18 813
ES6暴露 默认导出 /* 默认导出,只能有一个 */ const a = 1; // const b = 2; export default a; // export default b 默认暴露实际暴露的内容： { default: 1 } 当你 import result from ‘./xxx’ 引入时 实际相当于 import { default as result } from ‘./xxx’ 写法 import result from "./test/es-module/test1";
AudioCapture permission has been blocked because of a Feature Policy applied to the current document
qq_29012499的博客
04-22 7814
AudioCapture permission has been blocked because of a Feature Policy applied to the current document 使用<iframe>标签，如果<iframe>标签所在页面与嵌入的子页面域名不同或者端口不同，并且在子页面 中调用 摄像头或者耳麦，则会被浏览器安全策略警告并且拒绝提供调用...
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
weixin_33966095的博客
11-07 7138
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue;给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: "喜欢站在道德制高点的圣母婊" -- 适合去教堂 "无理取闹的键盘侠" -- 国际新闻版块欢迎你去 "有一定基础但又喜欢逼逼的人" 得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的 这种傻瓜文,简直浪费老子的时间! 对于以上三类人,...
el-input中的自动聚焦问题
杨雪枫的博客
06-21 4996
使用autofocus发现只有第一次的时候管用，再次打开弹框就没用了。后来找到一种方法。在打开弹框的方法最后面加上这一段代码 this.$nextTick(() => { this.$refs.cxk.focus(); }); 然后这里解释一下为啥要用 this.KaTeX parse error: Expected '}', got 'EOF' at end ...
Vue 中使用 el-input 自动获取焦点和二次获取焦点问题
热门推荐
钢铁之家
10-31 3万+
最近，碰到一个问题，就是输入框旁边有一个编辑按钮，点击时，才可以对输入框进行编辑： 要实现的效果： 为了方便输入，需要自动获取焦点，所以加入了autofocus，但是发现，只有第一个并且第一次点击才起作用。 查了网上的一些文档，说是跟dom的渲染顺序和数据的缓存有点儿关系，至于深层次的原因，还没查到，希望有知道的朋友，不吝告知。 然后使用了Vue提供的自定义指令来解决，还有一点儿需要注意，el...
element-ui里面的el-input设置autofocus失效怎么解决？
最新发布
07-15
您好！对于 `element-ui` 的 `el-input` 组件设置 `autofocus` 失效的问题，可以尝试以下几种解决方法： 1. 确保 `autofocus` 属性正确应用：检查代码中是否正确添加了 `autofocus` 属性，例如 `<el-input autofocus></el-input>`。 2. 确保组件可见：在组件显示或渲染之前，`el-input` 必须可见才能生效。您可以尝试在组件显示后设置焦点，例如使用 `this.$nextTick()` 方法： ```javascript this.$nextTick(() => { this.$refs.input.focus(); }); ``` 这里的 `this.$refs.input` 是 `el-input` 组件的引用。 3. 使用 `setTimeout` 设置焦点：在某些情况下，直接设置焦点可能会失效。可以尝试使用 `setTimeout` 函数来设置焦点，延迟一小段时间后再设置焦点： ```javascript setTimeout(() => { this.$refs.input.focus(); }, 100); ``` 这里的 `this.$refs.input` 是 `el-input` 组件的引用。 4. 确保只有一个元素设置了 `autofocus`：如果页面中同时存在多个设置了 `autofocus` 的元素，只有第一个会生效。请确保只有一个元素应用了 `autofocus` 属性。 如果以上方法仍然无效，可能需要进一步检查代码逻辑、组件生命周期等方面的问题。希望这些方法能帮助您解决问题！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

南北极之间

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

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

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

打赏作者

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

抵扣说明：

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

余额充值