在登陆界面实现按回车后登录

概述

主要有三种实现方式

  • 在 <body> 属性中添加代码:
  • 添加 JS 绑定
  • 在定义了 type=submit 按钮标签下,使用 @keyup.enter="submit"

具体实现方式：

一、在<body>属性中添加代码

onkeydown="if(event.keyCode===13) document.all.login.click()"

二、添加JS绑定

<script>
    $(document).keydown(function(event){
        if(event.keyCode==13){
        	// 其中 login 为登录按钮的 id 属性
			// 注 ：id不可重复
            document.getElementById("login").click();
        }
    });
</script>

注意：在使用此方法时，记得提前引用 jQuery

在定义了 type=submit 按钮标签下,使用 @keyup.enter="submit"

For Example:

<button id="login" type="submit" @keyup.enter="submit">登录</button>

在 vue 中， v-on 监听键盘事件时，存在特殊的键盘修饰符

<input v-on:keyup.13="submit">

同时，vue 也可使用常用按键的别名

<input v-on:keyup.enter="submit">
 
<!--简写-->
<input @keyup.enter="submit">

参考链接：
[HTML页面实现enter(回车)键自动登录操作]( https://blog.csdn.net/Healer_xiaozhen/article/details/109754985#:~:text=方法一 %3A 在<body>属性中添加如下代码%3A onkeydown%3D"if (event.keyCode%3D%3D%3D13) document.all.login.click ()" 注 ,%E5%B1%9E%E6%80%A7%20%28%E5%A6%82%E8%8B%A5%E4%B8%8D%E8%A1%8C%2C%E5%8E%9F%E5%9B%A0%E5%8F%AF%E8%83%BD%E6%98%AF%E7%89%88%E6%9C%AC%E9%97%AE%E9%A2%98%E8%AF%B7%E5%B0%9D%E8%AF%95%E4%BB%A5%E4%B8%8B%E5%85%B6%E4%BB%96%E6%96%B9%E5%BC%8F%29%20%E6%96%B9%E6%B3%95%E4%BA%8C%20%3A%20%E6%B7%BB%E5%8A%A0JS%E7%BB%91%E5%AE%9A%2C%20%E3%80%90%20login%20%E3%80%91%E4%B8%BA%E7%99%BB%E5%BD%95%E6%8C%89%E9%92%AEid%E5%B1%9E%E6%80%A7)

posted @ 2023-08-26 09:50  chenzhang-Blog  阅读(748)  评论(0)    收藏  举报