HTML页面实现enter(回车)键自动登录操作

编程知识行业动态更新时间:2024-06-13 00:21:24

方法一 :

在<body>属性中添加如下代码:

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

注:【login】：登录按钮 id属性 (如若不行,原因可能是版本问题请尝试以下其他方式)

方法二 :

添加JS绑定,【login】为登录按钮id属性

<script>
    $(document).keydown(function(event){
        if(event.keyCode==13){
            document.getElementById("login").click();
        }
    });
</script>

方法三:

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

@keyup : 按键抬起 @keydown : 按键按下

例如:

<button id="reg" type="submit" class="btn btn-primary btn-block btn-flat" @keyup.enter="submit">注册</button>

vue运行为v-on在监听键盘事件时，添加了特殊的键盘修饰符：

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

vue还可以通过常用按键的别名

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


<input @keyup.enter="submit">

附录(一):

全部的键盘别名：

.enter

.tab

.delete (捕获 “删除” 和 “退格” 键)

.esc

.space

.up

.down

.left

.right

一些组合按键：

.ctrl

.alt

.shift

.meta   //window系统下是window键，mac下是command键

Alt + C :

<input @keyup.alt.67="doSth">

Ctrl + Click :

<div @click.ctrl="doSth">按钮</div>

注:若用了封装组件，例如element，需在使用按键修饰符时添加 .native 例如:

<el-input v-model="account" placeholder="请输入账号" @keyup.enter.native="search()"></el-input>

附录(二):

常用按键对应的数字值（Unicode 编码）

数字值	实际键值
48到57	0到9
65到90	a到z（A到Z）
112到135	F1到F24
8	BackSpace（退格）
9	Tab
13	Enter（回车）
20	Caps_Lock（大写锁定）
32	Space（空格键）
37	Left（左箭头）
38	Up（上箭头）
39	Right（右箭头）
40	Down（下箭头）