进入登录页时，用户名输入框自动聚焦、按enter键让密码框聚焦，完整输入信息后登录

让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>