登录页面的 回车键登录页面 ----- event.keyCode

最新推荐文章于 2021-11-06 15:24:25 发布
最新推荐文章于 2021-11-06 15:24:25 发布
阅读量383 收藏 2
点赞数
分类专栏： 前端 文章标签： 回车登录事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/runoob12/article/details/103048317
版权 
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<base href="/">
    <meta charset="UTF-8">
    <title>商户管理系统</title>
    <meta name="renderer" content="webkit"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
    <meta name="apple-mobile-web-app-capable" content="yes">    
    <meta name="format-detection" content="telephone=no">
    <link href="images/favicon.ico" rel="shortcut icon" />
    <link rel="stylesheet" href="js/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/login.css">
    
    <script type="text/javascript">
    //回车键
    function keyLogin(){debugger
        if (event.keyCode==13){
        	var isLogin = document.getElementById('isLogin').value;
        	if(isLogin == 1){
        		document.getElementById('btn_login').click();
        	}else{
        		document.getElementById('btn_regist').click();
        	}
        } 
    }
    </script>
</head>
<body onkeyup="keyLogin();" style="background: #2590E2;">
   <input type="hidden" id="isLogin" value="1">
   <div class="mainContent">
      <div class="layui-row">
        <div class="layui-col-xs6">&nbsp;</div>
        <div class="layui-col-xs6">
	        <form id="mainForm">
	             <ul id="login-nav" class="layui-nav-header">
		            <li class="layui-nav-item nav-title">商户登陆</li>
		            <li class="layui-nav-item item-nav">账号</li>
		            <li class="layui-nav-item">
		               <input type="text" name="account" placeholder="请输入账号"/>
		            </li>
		            <li class="layui-nav-item item-nav">密码</li>
		            <li class="layui-nav-item">
		               <input type="password" name="password" placeholder="请输入密码"/>
		            </li>
		            <%--<li class="layui-nav-item item-nav">验证码</li>
		            <li class="layui-nav-item">
		                <input type="text"  name="vcode" placeholder="请输入验证码" maxlength="4" autocomplete="off"/>
		                <img src="getVCode" alt="" class="lay-right" id="verifyImg"/>
		            </li>--%>
		            <li class="layui-nav-item btn-login">
		                <a id="btn_login" class="layui-btn layui-btn-normal">登录</a>
		            </li>
<%--                     <li class="layui-nav-item nav-footer">--%>
<%--                         <span id="forgetPwd">忘记密码</span>--%>
<%--                     </li>--%>
                     <li class="layui-nav-item btn-login">
		                <a id="newRegist" class="layui-btn layui-btn-danger">新用户入驻</a>
		            </li>
		       </ul>
		       <ul id="regist-nav" class="layui-nav-header">
		            <li class="layui-nav-item nav-title">用户注册</li>
				   <li class="layui-nav-item item-nav">账号</li>
				   <li class="layui-nav-item">
					   <input type="text" name="userAccount" placeholder="请输入账号" autocomplete="on" maxlength="16"/>
				   </li>
		            <li class="layui-nav-item item-nav">手机号</li>
		            <li class="layui-nav-item">
                        <input name="hide1" type="text" style="height: 0px;width:0px;border: 0;margin: 0;padding: 0;position: absolute;"/>
                        <input name="hide2" type="password" style="height: 0px;width:0px;border: 0;margin: 0;padding: 0;position: absolute;"/>
		               <input type="text" name="account" placeholder="请输入手机号码" autocomplete="off" maxlength="11"/>
		            </li>
					 <li class="layui-nav-item item-nav">验证码</li>
		            <li class="layui-nav-item">
		                <input type="text"  name="vcode" placeholder="请输入短信验证码" maxlength="4" autocomplete="off"/>
		                <a id="getSmsCode" class="layui-btn layui-btn-mini lay-right">获取验证码</a>
		                <span class="timeTips" style="display: none;font-size: 12px;">再次发送<span class="countTime"></span>s</span>
		            </li>
				   <li class="layui-nav-item item-nav">密码</li>
				   <li class="layui-nav-item">
					   <input type="password" name="password" placeholder="请输入密码" autocomplete="off" maxlength="20"/>
				   </li>
		            <li class="layui-nav-item item-nav">
		               <img id="isReadAgreement" src="images/login/check.png" data-value="0">
		                                       我已经阅读并同意<a id="readAgreement" class="layui-btn layui-btn-mini">《商户服务协议》</a>
		            </li>
		            <li class="layui-nav-item btn-login">
		                <a id="btn_regist" class="layui-btn layui-btn-normal">下一步</a>
		            </li>
		            <li class="layui-nav-item nav-footer">
		                <a class="layui-btn layui-btn-mini to-login">已有账号</a>
		            </li>
		       </ul>
	           </form>
        </div>
      </div>
    </div>
    <div id="imgCodeDiv" style="display:none;">
      <form class="layui-form">
	       <div class="layui-form-item">
	        	<input type="text"  id="imgCode"  placeholder="请输入图片验证码"  maxlength="4" autocomplete="off">
	        	<img alt="" class="lay-right" style="position: inherit;margin-left: 20px;" id="codeImg"/>
	        </div>
      </form>
    </div>
    <script type="text/javascript" src="js/rsa/BigInt.js"></script>
    <script type="text/javascript" src="js/rsa/Barrett.js"></script>
    <script type="text/javascript" src="js/rsa/RSA.js"></script>
    
    <script src="js/layui/layui.js" charset="utf-8"></script>
    <script src="scripts/common.js" charset="utf-8"></script>
    
	<script type="text/javascript" src="scripts/login.js"></script>	
	<script type="text/javascript" src="scripts/register.js"></script>
</body>
</html>

键盘回车事件：

1.在body体的开头，增加onkeyup 事件会在键盘按键被松开时发生：
在这里插入图片描述
2.script部分加操作， event.keyCode==13 判断是否点击回车键在这里插入图片描述

runoob12
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript键盘事件大全event.keycode
05-19
javascript键盘事件大全，最全的键盘事件event.keycode
按下回车键时自动切换焦点event.keyCode
weixin_30296405的博客
11-30 337
在设计表单时，为了方便用户填写表单，可以设置按下回车键自动切换到下一个控件的焦点，而不是直接提交表单。主要应用的javascript的Event对象的keyCode只读属性。实现的关键代码如下： <script type="text/javascript">function Myenter(str){ if (event.keyCode == 13){ str.focus...
js防止回车(enter)键提交表单及javascript中event.keycode
wudean0910的博客
05-15 1510
如何防止回车（enter）键提交表单，其实很简单，就一句话。onkeydown="if(event.keyCode==13)return false;"把这句写在from标签里面就好了。 如果在页面中按Enter键会自动提交的话，可以设置返回值防止自动提交如返回值必须是false function gosearch() { if(window.event.keyCode
Wxpython通过wx.KeyEvent实现回车登录
weixin_41989712的博客
10-07 741
监控键盘输入执行事件一、回车执行函数二、 在做Wxpython的登录界面，通过一个“登录”Button实现了登录功能，那么如何像其他软件/网页一样实现回车=登录 一、回车执行函数 在登录界面的class里写一个回车执行的函数 def ReturnLogin(self,event): keycode = event.GetUnicodeKey() if keycode == wx.WXK_RETURN: self.LoginButton(event) # 调用前面的登录
event.keyCode用法详解
无所谓
03-21 4840
我们使用的键盘上的键除过我们看到的有显示内容之外，他各自还有一个对应的数字代码，便于计算机识别和运行 而js中event.keyCode对应的值就是键盘上每个键的代码，比如：回车键，event.keyCode的值为13 那下面做个简单的事例演示一下，让我们了解的更彻底一些，不要看一遍之后又忘记了 举个简单的例子，有时候我们在编辑表单的时候，当一个文本框输完，会习惯性地去点一下回车键，一个是习
JS键盘的键码(event.keyCode)图片版
10-27
例如，如果你想要监听用户按下回车键，你可以这样编写代码： ```javascript document.addEventListener('keydown', function(event) { if (event.keyCode === 13) { console.log('Enter键被按下'); // 执行你的...
jquery点击回车键实现登录效果并默认焦点的方法
10-18
其中一个关键点就是在登录界面中，用户不仅可以通过鼠标点击按钮进行登录，还应该能够使用键盘的回车键触发登录操作，这能提高交互效率。本文将详细介绍如何使用jQuery实现点击回车键登录的效果，并使输入框自动获得...
vue中实现回车键登录功能
11-20
以上的代码，在这几天测试发现有一个问题，在登录进系统之后，从首页切换到其他界面，点击回车，会导致界面调整到首页！ 要实现： 只在Login界面点击回车才执行onkeypress方法，其他的点回车均不触发(还不明白为
KeyCODE-crx插件
04-02
例如，ASCII码13代表回车键，97代表小写字母'a'。这些值可以用来识别不同的键，包括字母、数字、标点符号以及功能键。 为了使用KeyCODE-crx插件，首先需要将其安装到支持扩展程序的浏览器上，如Google Chrome。安装...
JS按回车键实现登录的方法
12-08
本文实例讲述了JS按回车键实现登录的方法，该功能有着非常广泛的实用价值。... if (event.keyCode==13) //回车键的键值为13 document.getElementByIdx_x("input1").click(); //调用登录按钮的登录事件 } </sc
Chrome中的onkeypress 的keyCode BUG
偶尔记一下 - mybatis.io
04-29 7086
在Chrome中onkeypress的keyCode和onkeydown中的keyCode并不一致... 其中onkeypress无法捕获F1~F12，onkeydown可以捕获 onkeypress捕获a-z时区分大小写，onkeydown不区分大小写。 最主要的一个问题就在于a-z的大小写，由于onkeypress不捕获F1~F12，但是区分a-z的大小写。而且直
登陆回车（Enter）事件
吃货的博客
06-26 2705
function keyLogin(event){ //谷歌能识别event，火狐识别不了，所以增加了这一句，chrome浏览器可以直接支持event.keyCode var theEvent = window.event || arguments.callee.caller.arguments[0]; var key = theEvent.keyCode; ...
event.keyCode对列表
轩辕鬼谷的博客
12-18 569
字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U
登录时 按Enter 进入登录界面 或者下一行
weixin_30763455的博客
08-12 401
1 function keyLogin() { 2 if (event.keyCode == 13) //回车键的键值为13 3 $(".btn-submit").click(); //调用登录按钮的登录事件 4 }; 在做登录的界面的时候经常会用到按Enter键 登录 或者 跳到...
键盘按键keyCode大全,js页面快捷键
aixiachuo3088的博客
06-27 227
字母和数字键的键码值(keyCode) 按键键码按键键码按键键码按键键码 A 65 J 74 S 83 1 49 B 66 K 75 T 84 2 50 C 67 L 76 U 85 3 51 D 68 M 77 V 86 4 52 E 69 N 7...
event.keyCode用法及列表
weixin_34409822的博客
05-03 3214
HTML 用户名：&lt;input type="text" id="UserAccount" onKeyPress="JumpByEnter(UserPwd)" /&gt; 密码：&lt;input name="UserPwd" type="password" onKeyPress="IsEnterKeyPress()"&gt; JavaScript
Qt键盘回车事件keyPressEvent之Qt::Key_Enter与Qt::Key_Return
百无一用狂书生
01-07 4527
在重载QWidget键盘事件时发现字母键盘回车键与数字小键盘回车键在键盘事件中定义不同。 Qt:Key_Return : 0x01000005    字母键盘回车键 Qt::Key_Enter : 0x01000004     数字小键盘回车键    ...
LayUi数据表格数据太多导致下拉框卡顿问题
热门推荐
weixin_45237065的博客
01-14 2万+
LayUi数据表格数据太多导致下拉框卡顿问题 layui数据表格（详见官网） 根据官网示例 做出数据表格 示例根据官网表格展示 在layui官网 数据表格示例中 https://www.layui.com/demo/ 修改部分内容 例如表格上方需要加上筛选的表单 有文本框可搜索下拉框等。 在顺便更改数据表格的limit和limits参数 将每页显示条数加到1000条 发现数据表格稍稍卡顿但是还算流畅 而上面的form表单一一测试 普通的输入框不卡顿 下拉框卡顿 且点击和退
2021-11-06 工作记录--LayUI-敲击键盘enter键，仍可以实现搜索
weixin_48850734的博客
11-06 1129
敲击键盘enter键，仍可以实现搜索 // 点击搜索按钮 $('.demoTable .layui-btn').on('click', function () { var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); // 敲击键盘enter键，仍可以实现搜索 $(window).on
el-input按回车键触发事件
最新发布
08-18
要使 el-input 组件在按下回车键时触发事件，可以使用以下两种方法： 1. 使用 @keyup.enter 事件监听器： ```html <el-input @keyup.enter="handleEnter"></el-input> ``` ```javascript methods: { handleEnter()...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值