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. interceptor＆filter

    1.基于 filter基于filter接口中的doFilter回调函数: interceptor则基于Java本身的反射机制: 2.与servlet关系 filter是依赖于servlet容器的,没有 ...

  2. js小技巧--摘录1

    原文地址https://github.com/loverajoel/jstips 1.数组中插入元素 a.尾部追加 var arr = [1,2,3,4,5]; var arr2 = []; arr. ...

  3. Determining IP information for eth0...failed

    事故现场 eth0 Link encap:Ethernet HWaddr :0C::B6:D2:5A inet6 addr: fe80::20c:29ff:feb6:d25a/ Scope:Link ...

  4. WPF 使用附加属性增加控件属性

    使用附加属性增加控件属性,使得这个附加属性在使用的时候没有局限性,可以在任何的控件中使用它来增加所需要的属性,使得控件的属性使用起来非常灵活 一.自定义附加属性 using System; using ...

  5. php能力自测

    最近整理些PHP方面的问题,PHPer可自测自身的功底如何! 查看更多问题 php运行模式 php有几种主要的运行模式?分别使用在那些场景下? gi与fastcgi有什么不同?他们的优缺点有哪些? 如 ...

  6. A GDB Tutorial with Examples--转

    http://www.cprogramming.com/gdb.html A GDB Tutorial with Examples By Manasij Mukherjee A good debugg ...

  7. tomcat主页打不开，tomcat manager 配置，Failed to start component [StandardEngine[Catalina].

    Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/Serv]] ...

  8. 我的“MIT Challenge”

    前言 在学习之余看到了一个有趣的挑战,名叫"MIT Challenge",这个挑战的目标是在一年365天之内学习 MIT 计算机系本科本科学生四年的课程.自己大二学习算法时也曾学习 ...

  9. XmlDocument.LoadXml和Load的区别

    LoadXml:从指定的字符串加载 XML 文档. eg:doc.LoadXml("<root>aa</root>"); .csharpcode, .csh ...

  10. 【angular5项目积累总结】消息订阅服务

    code import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable ...