js 捕捉回车键触发登录,并验证输入内容

时间:2021-07-07 00:27:39

js 捕捉回车键触发登录,并验证输入内容

有时候我们会遇到 web 页面中捕捉按键,触发一些效果,

比如常见的回车键触发登录,并验证输入内容,下面会介绍,截图:

js 捕捉回车键触发登录,并验证输入内容

一、最简单的捕捉回车键:判断按下的是不是回车键,jsEnter.html:

提示:回车键的键值为 13

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language='javascript'>
document.onkeydown=function(){
//回车键的键值为 13
if (event.keyCode == 13){
alert('按下的是回车键!');
}
else{
alert('您按的不是回车键!');
}
}
</script>
</head>
<body>
<h3>您按回车键试一下?</h3>
</body>
</html>

二、按下回车键,实现登录操作,jsEnterLogin

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link rel="stylesheet" href="css/text.css" type="text/css">
<script language="javascript">
function check() {
var formname=document.loginForm;
if (formname.userName.value == "") {
alert("请输入用户名!");
formname.userName.focus();
return false;
}
if (formname.pwd.value == "") {
alert("请输入密码!");
formname.pwd.focus();
return false;
}
formname.submit();
}
//回车时,默认是登陆
function on_return(){
if(window.event.keyCode == 13){
if (document.all('sub')!=null){
document.all('sub').click();
}
}
}
</script>
</head>
<body onkeydown="on_return();">
<form name ="loginForm" method="post" action="#">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="69%" height="30"><span class="font_04">帐户名</span>
<input type="text" name="userName">
</td>
</tr>
<tr>
<td width="69%" height="30"><span class="font_04">密 码</span>
<input type="password" name="pwd" >
</td>
</tr>
<tr>
<td width="31%" height="30">
<a id="sub" onClick='check()' style="color: brown">
登陆</a></td>
</tr>
</table>
</form>
</body>
</html>

js 捕捉回车键触发登录,并验证输入内容的更多相关文章

  1. JS按回车键实现登录的方法

    本文实例讲述了JS按回车键实现登录的方法,该功能有着非常广泛的实用价值.分享给大家供大家参考之用.具体方法如下: 方法一: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 &lt ...

  2. 原生js按回车键实现登录

    这篇文章主要介绍了原生JS按回车键实现登录的方法,众所周知,这是在web程序设计中的一个非常实用的小技巧,主要用于表单提交,包括注册.登录等等功能,具有很好的用户体验,有着非常广泛的实用价值,需要的朋 ...

  3. js设置回车键触发事件

    设置按回车键时触发查询事件: document.onkeydown = function(e){ var ev = document.all ? window.event : e; if(ev.key ...

  4. vue&period;js中 &comma;回车键实现登录或者提交表单&excl;

    vue的功能非常强大,但是我们作为一个后端开发人员,前端的东西不一定都弄的很明白,今天就给大家介绍一个回车提交表单的真实案例,达到回车登录的效果! @ keyup.enter 实现的效果 <in ...

  5. PeopleEditor允许客户端输入的同时验证输入的内容

    如何判断PeopleEditor的值为空   在sharepoint开发中,我们经常会用到PeopleEditor这一控件,最近我在写程序的时候用到了,开始的时候不知道怎么用,后来问题解决啦,现在写出 ...

  6. js验证输入的金钱格式

    <html> <head> <title>js验证输入的金钱格式</title> <script type="text/javascri ...

  7. 正则表达式控制Input输入内容 &comma;js正则验证方法大全

    https://blog.csdn.net/xushichang/article/details/4041507 //输入姓名的正则校验 e.currentTarget.value = e.curre ...

  8. js捕捉IE窗口失去焦点事件&comma;判断离开页面刷新或关闭的方法

    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...

  9. 关于JS中的常用表单验证&plus;正则表达式

    一.非空验证 trim:去空格(去掉前后的空格),任何字符串都可以用这个方法.写法为:if(v.trim().length==0),表示如果去掉空格后的字符串的长度为0. <body> & ...

随机推荐

  1. Spark History Server配置使用

    Spark history Server产生背景 以standalone运行模式为例,在运行Spark Application的时候,Spark会提供一个WEBUI列出应用程序的运行时信息:但该WEB ...

  2. 静态文件服务器&lpar;The static file servers&rpar;

    大部分的网站都会提供一些在通常操作下不会发生改变的资源给浏览器.显示网站外观的图片和CSS文件,在浏览器中运行的JavaScript代码,没有动态组件的HTML文件就是这种资源中的代表,统称为静态文件 ...

  3. Spark系列&lpar;四&rpar;整体架构分析

    架构流程图 说明  Driver端流程说明(Standalone模式) 使用spark-submit提交Spark应用程序Application. 通过反射的方式创建和构造一个DriverActor进 ...

  4. qt的安装及连接sql使用注意

    qt安装与使用 今天写下qt使用的注意事项,qt-project.org上已经更新了qt5的相关库,但是建议不是很熟系qt的朋友,或者说想使用传统qt api而不是qml的朋友, 继续下载老版本4.8 ...

  5. ios用xib实现三等分以及多等分思路

    Auto Layout 的本质原理 Auto Layout 的本质是用一些约束条件对元素进行约束,从而让他们显示在我们想让他们显示的地方. 约束主要分为以下几种(欢迎补充): 相对于父 view 的约 ...

  6. MVC和三层架构的区别

    MVC是一种设计模式,Modal,View,Controller,三层分开,解开耦合,方便替换. 三层架构包括 UI层,业务逻辑层,Dao层.UI层负责展示数据,业务逻辑层具体处理数据,Dao层负责和 ...

  7. iOS Foundation框架 -1&period;常用结构体的用法和输出

    1.安装Xcode工具后会自带开发中常用的框架,存放的地址路径是: /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.plat ...

  8. Flutter之CustomView

    文中所有示例代码请点击: gitee.com/yumi0629/Fl… 今天呢,我小拉面主要想给大家讲一讲Flutter中的 Slivers 大家族的使用场景和方法.开发过列表布局的同学们应该对 Sl ...

  9. python 全栈开发,Day101&lpar;redis操作&comma;购物车&comma;DRF解析器&rpar;

    昨日内容回顾 1. django请求生命周期? - 当用户在浏览器中输入url时,浏览器会生成请求头和请求体发给服务端 请求头和请求体中会包含浏览器的动作(action),这个动作通常为get或者po ...

  10. &gt&semi;&gt&semi;&gt&semi;&gt&semi;&gt&semi;&gt&semi;&gt&semi;&gt&semi; &lbrack;ovs&rsqb;&lbrack;libvirt&rsqb; virt-xml ovs-vsctl

    查看可用的参数: [root@vrouter1 tong]# virt-xml --add-device --network=? |grep source source source_mode sou ...