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. .crx 文件修改

    .crx 文件类型:Chrome Extension 扩展名为.crx的文件是一个插件文件. 解压:使用7zip 修改: notepad++ 打包: Chrome 扩展项

  2. Codeforces Round #555 (Div. 3) A B C1(很水的题目)

    A. Reachable Numbers 题意:设f(x)为 x+1 这个数去掉后缀0的数,现在给出n,问经过无数次这种变换后,最多能得到多少个不同的数. 代码 #include<cstdio& ...

  3. Error: Another program is already listening on a port that one of our HTTP servers is configured to use. Shut this program down first before starting

    解决方法: find / -name supervisor.sock unlink /name/supervisor.sock 2. www-data 用户是干什么用的 3.如何通过superviso ...

  4. hibernate的AnnotationHelloWorld

    来龙去脉: 最开始sun这个土鳖设计了EJB2.0.EJB2.1那个时代.后来有人发现设计的很烂,不好用,就设计了hibernate,,人们发现用hibernate反而比EJB2.0.2.1好,hib ...

  5. Vue单文件模板实例

    AddItemComponent.vue <template> <div id="add-item-template"> <div class=&qu ...

  6. Mysql5.7 半同步改进

    Mysql5.6半同步策略 Mysql 5.6在半同步的时候,采用的是After Commit策略.即在主库上commit了之后,等待从库返回确认. 在这里,首先会出现幻读的问题,即当前连接的事务读取 ...

  7. *2.2.4 加入virtual interface

    在前几节的例子中,driver中等待时钟事件(@posedge top.clk).给DUT中输入端口赋值(top.rx_dv <= 1' b1)都是使用绝对路径,绝对路径的使用大大减弱了验证平台 ...

  8. HTTPS的误解(二)

    大家好,我们接着HTTPS的误解(一)接着讲,经常有人会说更换或转移服务器时要购买新证书,服务器SSL证书价格很贵,易维信(EVTrust)给大家澄清了这些容易产生误解的地方,详细见下面文章. 误解四 ...

  9. 百度优先收录HTTPS网站？你的网站https还在等什么

    2015年5月25日,百度站长平台发布的公告,称将正式开放对HTTPS站点的收录.开始优先抓取HTTPS站点.所有事情都有两面性,这个消息对于已 经到HTTPS的网站来说是个喜大普奔的好消息.对于需要 ...

  10. 转：不用安装Oracle客户端，远程连接Oracle数据库

    转摘自: http://blog.sina.com.cn/s/blog_90b20fe70101az2z.html Oracle数据库安装过程较为繁琐,而且卸载更加麻烦,如果卸载不干净,下次安装Ora ...