进入登录页时,用户名输入框自动聚焦、按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>
### 实现按回车自动提交登录表单的方法 对于HTML中的`<form>`元素,默认情况下当用户在一个输入字段中按下回车,如果该表单内只有一个可聚焦控件或者当前焦点位于最后一个可聚焦控件上,则浏览器通常会尝试提交整个表单。然而为了确保这种行为总是发生,并且能够处理更复杂的场景,在JavaScript的帮助下可以通过监听盘事件来增强这一特性。 #### 使用纯HTML方式 最简单的方式是在定义表单结构不作额外设置,因为标准的HTML `<form>` 表单已经支持此功能。只要保证有一个用于提交动作的按钮存在即可: ```html <form action="/login" method="post"> <input type="text" name="username"/> <input type="password" name="password"/> <button type="submit">Login</button> </form> ``` 这种方式下,即使没有显式的 JavaScript 处理逻辑,大多数现代浏览器也会允许用户通过点击回车来进行表单提交[^1]。 #### 利用JavaScript控制 若需更加精细地管理何响应回车按以及执行特定的操作(例如仅在用户名和密码都已填入的情况下才允许),则可以在页面加载完成后绑定相应的事件处理器给目标输入域: ```javascript document.addEventListener('DOMContentLoaded', function () { const form = document.querySelector('#login-form'); form.addEventListener('keypress', (event) => { if(event.key === 'Enter'){ event.preventDefault(); // 阻止默认行为 let usernameInput = document.getElementsByName('username')[0]; let passwordInput = document.getElementsByName('password')[0]; if(usernameInput.value && passwordInput.value){ form.submit(); } } }); }); ``` 这段脚本首先等待DOM完全加载完毕再注册一个针对`keypress`事件的侦听器;一旦检测到按下的是 Enter (`'Enter'`) 就阻止其默认的行为并检查两个主要输入框是否有值填充——如果有就调用 `form.submit()` 方法手动发起请求[^2]。 另外值得注意的是某些UI框架如Layui可能会改变默认行为模式使得简单的 HTML 结构不足以满足需求。在这种情形下应当查阅对应库文档了解具体机制以便做出适当调整[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值