解决输入框自动聚焦失效问题,亲测有效

1,582 阅读1分钟

方法一

html:
 <el-input autofocus ></el-input>
 

方法二

html:
<el-input autofocus ref="searchInput"></el-input>
js:
this.$nextTick(() => {
    const searchInput = this.$refs.searchInput as any
    searchInput.focus()
})
/**
*  这时候如果外部已经有聚焦元素了,这么调用会控制台会报一个提示:
*   Autofocus processing was blocked because a document already has a focused element.
*   这时候需要用到方法三解决
*/

方法三

html:
<el-input autofocus ref="searchInput"></el-input>
js:
setTimeout(() => {
    this.$nextTick(() => {
        const searchInput = this.$refs.searchInput as any
        searchInput.focus()
    })
}, 0)