讓element-ui的輸入框聚焦的4種方式

思路：（可以跳過這一步看完整代碼——完整代碼）

1. 進入頁面時，用戶名輸入框就要獲取焦點，使用 自定義指令 聚焦更方便。當然也可以用 ref 在 mounted() 鉤子函數中讓輸入框聚焦。

mounted(){this.$nextTick(()=>{ this.$refs.userName.focus();}); }

2. 在用戶輸入框輸入信息后，需要按 Enter 鍵，使下一個輸入框聚焦，此時要用到按鍵事件。同時還要考慮按下 enter 鍵后，輸入框內是否有值。如果沒有值，那么就讓用戶輸入框失去焦點，這一步的作用是讓 element封裝好的表單驗證信息顯示出來，然后再讓用戶輸入框重新聚焦。

confirmInput(e){if(e.target.value !=""){e.target.blur();} else {e.target.blur();e.target.focus();}},

3. 用戶在密碼框輸入密碼后，要進行登錄操作。同樣要判斷這個輸入框是否有值。

完整代碼：

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="loginForm"><el-form-item prop="userName"><el-input type="text" size="medium" ref="userName"v-focus v-model="ruleForm.userName" @keyup.enter.native="confirmInput($event,false)"><template slot="prepend">用戶名：</template></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="ruleForm.password"size="medium" ref="password"@keyup.enter.native="confirmInput($event,true)"><template slot="prepend">密碼：</template></el-input></el-form-item><el-form-item class="checkboxItem"><el-checkbox label="記住密碼"></el-checkbox></el-form-item><div class="submitBtn"><p @click="loginEnter">登 錄</p></div> </el-form><script> data(){return {rules: {userName: [ { required: true, message: '請輸入用戶名', trigger: 'blur' } ],password: [ { required: true, message: '請輸入密碼', trigger: 'blur' } ]},ruleForm: {userName: "",password: ""}} }, directives:{focus: {inserted: function(el){el.children[1].focus();}}}, methods: {//按Enter鍵//如果有多個輸入框，可以在這一步多傳入一個參數，//假設第三個參數是refName，在模板中傳的是該輸入框后一個要聚焦的輸入框的ref值，并將這個值傳給inputFocus()，作為第二個參數。//在inputFocus中，將this.$refs.password.focus();中的.password用[refName]來代替。confirmInput(e, isLogin){// 判斷輸入框是否有值，有的話失焦讓另外一個輸入框聚焦；// 沒有就先失焦讓提示顯示出來，再重新聚焦（這樣可以讓element表單封裝的驗證信息顯示出來）if(e.target.value !=""){e.target.blur();this.inputFocus(isLogin);} else {e.target.blur();e.target.focus();}},//通過isLogin這個參數來判斷按下enter鍵后是否要調用登錄接口inputFocus(isLogin){if(isLogin){this.loginEnter();} else {this.$refs.password.focus();}},// 登錄loginEnter(){this.$refs.ruleForm.validate((valid) => {if (valid) {this.$router.replace('/productWarehouse/history');} else {alert('error submit!!');return false;}});} } </script>

示范一下如果有多個輸入框的情況：

<el-input v-model="loginForm.userName" ref="userName" v-focus@keyup.enter.native="confirmInput($event,false, 'password')"placeholder="輸入您的賬號或手機號" class="nobr" autocomplete="off" ></el-input><el-input show-password v-model="loginForm.password" ref="password"@keyup.enter.native="confirmInput($event,netToken?true:false, 'codeInput')"placeholder="輸入您的密碼" class="nobr" autocomplete="off" ></el-input><el-input v-model="loginForm.validCode" ref="codeInput"@keyup.enter.native="confirmInput($event,true)"placeholder="輸入驗證碼（忽略大小寫）" class="nobr" ></el-input><script>//點擊確認按鈕confirmInput(e, isLogin, inputRef){if(e.target.value != ""){e.target.blur();this.inputFocus(isLogin, inputRef);} else {e.target.blur();e.target.focus();}},//isLogin=true表示登錄inputFocus(isLogin, inputRef){if(isLogin){this.submitForm();} else {this.$refs[inputRef].focus();}}, </script>

總結

以上是生活随笔為你收集整理的进入登录页时，用户名输入框自动聚焦、按enter键让密码框聚焦，完整输入信息后登录的全部內容，希望文章能夠幫你解決所遇到的問題。

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