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

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

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

一、最简单的捕捉回车键：判断按下的是不是回车键，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 < ...

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

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

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

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

  4. vue.js中 ,回车键实现登录或者提交表单!

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. P3348 [ZJOI2016]大森林(Link-cut-tree)

    传送门 题解 题面大意: \(0.\)区间加节点 \(1.\)区间换根 \(2.\)单点询问距离 如果没有\(1\)操作,因为区间加节点都是加在下面,所以我们可以直接把\(n\)棵树压成一棵树,直接询 ...

  2. 有道词典命令行查询工具（Mac/Ubuntu）

    说明:此工具是基于node.js的,所以必须安装npm. 官网:https://github.com/kenshinji/yddict 安装: Mac: # 安装npm brew install np ...

  3. Qt Creator中使用qss对界面美化没有作用（效果）的问题

    最近在研究qt界面开发,发现使用qss对界面进行美化后效果不错,要比mfc效率高很多,美化效果也很出色.但是在使用qss文件对界面控件进行美化的过程中遇到了个很奇葩的问题,困惑了我好久,今晚又遇到了, ...

  4. Google Java 编程风格指南 —— 见微知著

    目录 前言 源文件基础 源文件结构 格式 命名约定 编程实践 Javadoc 后记 前言 这份文档是Google Java编程风格规范的完整定义.当且仅当一个Java源文件符合此文档中的规则, 我们才 ...

  5. 基于ASP.Net Core学习Docker技术第一步：在CentOS7安装Docker平台

    Docker技术几年前就火了,伴随着今年来devops的流行,这项技术一直被技术社区追捧.提起Docker很容易被默认为是Linux平台下的技术,.NET的技术跟他似乎没有沾边,不过那是对非.NET ...

  6. 【译】Steve Yegge的文章《Practicing Programming》

    与你所相信的恰恰相反,单纯地每天埋头于工作并不能算是真正意义上的锻炼——参加会议并不能锻炼你的人际交往能力:回复邮件并不能提高你的打字水平.你必须定期留出时间,集中锻炼,这样才能把事情做得更好.我认识 ...

  7. Grid控件

    Grid控件是WPF布局容器中功能最强大.最灵活的控件.Grid控件基本上能够完成其他WPF容器控件所能完成的功能,Microsoft建议大多数界面的布局都使用Grid控件来实现,因此默认情况下.vs ...

  8. web弹出对话框

    Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('请输入 ...

  9. jQuery选择器，外加例子讲解

    jQuery选择器的优势: (1) 代码更简单(2) 支持CSS1到CSS3选择器(3) 完善的处理机制 jQuery选择器的分类 (1) 基本选择器 基本选择器是jQuery中使用最多的选择器,它又 ...

  10. Java学习--Jsp简介