admin管理员组文章数量:1616675
让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键让密码框聚焦,完整输入信息后登录 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728746324a1171325.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论