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. 3.1）DFM-塑胶件设计总章

    本章目的:各种塑胶工艺了解,DFM-塑胶件的设计准则是依据哪种工艺. 1.塑胶概念 塑胶的定义(美国塑料工业协会): 塑胶主要由碳.氧.氢和氮及其他有机或无机元素所构成,成品为固体,在制造过程中是熔融 ...

  2. 题解 p2420 让我们异或吧

    传送门 #include<iostream> #include<cstdio> #include<cstring> using namespace std; ;in ...

  3. 在Azuer创建自己的Linux_VM

    ---恢复内容开始--- emm..就是想搭个自己的VPN去YouTube看看视屏找找资源什么的... (滑稽.jpg)然后发现似乎需要这个玩意儿 先去申请一个Azuer账户 然后根据要求一步步来就好 ...

  4. PHP正则表达式笔记和实例

    转自:  https://www.cnblogs.com/yafei236/p/4168290.html 本文主要介绍如何在PHP使用正则表达式,并附带几个实例. 这两天工作用到了正则表达式,发现自己 ...

  5. C#中方法,方法声明,方法调用和方法重载!

      一,定义:方法是具有名称的可执行代码块. 二,方法的声明:声明方法的语法包括以下五个部分: 1,访问权限修饰符,这个是可选的参数,默认值是私有访问private,即只能从声明它的类的内部访问. 2 ...

  6. 爬虫URL去重

    这个要看你想抓取的网页数量是哪种规模的.如果是千万以下用hash表, set, 布隆过滤器基本可以解决,如果是海量的......嗯我也没做过海量的,不过hash表之类的就别想了,内存根本不够,分割线下 ...

  7. shiro学习笔记_0500_授权

    1,授权:给身份认证通过的人,授予他可以访问某些资源的权限. 2,权限粒度:分为粗粒度和细粒度. 粗粒度:例如对 user 的 crud,也就是通常所说的对表的操作. 细粒度:对表中记录的操作.如 只 ...

  8. Javac之关于方法的选择

    15.12. Method Invocation Expressions 15.12.1. Compile-Time Step 1: Determine Class or Interface to S ...

  9. android_serialport_api代码分析

    1. 导入Android studio android_serialport_api是一个开源的串口测试工具,代码应该是用eclipse工程(不确定,没用过eclipse,反正不是Android st ...

  10. 远程服务通讯Service(Remote--AIDL)

    服务端代码:https://github.com/maogefff/AndroidTest/tree/develop-ServiceLocal2 客户端代码:https://github.com/ma ...