方法一、綁定ref
方法二、通過自定義事件中的事件對象 $event，找到input
方法三、使用自定義指令
方法四、使用原生input

---

方法一、綁定ref——參考yiyueqinghui

<el-input v-model="form.name" ref="name"></el-input> this.$refs.name.focus();

方法二、通過事件中的事件對象 $event，找到input——參考Z.R.J

<el-input v-model="form.name" ref="name" @key.enter.native="inputFocus($event)"></el-input>inputFocus(e){e.target.focus();e.target.blur(); //讓輸入框失去焦點 }

方法三、使用自定義指令——官網

<el-input v-model="form.name" ref="name" v-focus></el-input>directives: {focus: {inserted: function (el) {console.log(el);//因為el-input這是個組件，input外面被一層 div 包裹著//el打印出來是外面這個 div，需要找到內層的inputel.children[1].focus();}} }

方法四、使用原生——參考 蘿卜愛吃青菜

<input type="text" id="userName" name="username" autofocus="autofocus"/>this.$nextTick(()=>{var userName = document.getElementById("userName");userName.focus(); })

---

案例、進入登錄頁時，用戶名輸入框自動聚焦、按enter鍵讓密碼框聚焦，完整輸入信息后登錄

總結

以上是生活随笔為你收集整理的让element-ui的输入框聚焦的4种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。