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. Maven 安装jar文件到本地repository

    Reference: https://maven.apache.org/general.html#importing-jars mvn install:install-file \ -Dfile=&l ...

  2. 2019.04.07 第三次训练 【WHU校赛】

    A: (模拟退火+点到线段最短距离) https://blog.csdn.net/Link_Ray/article/details/89173222 B:✅ C: (线段树+二分) https://b ...

  3. Android字符串及字符串资源的格式化

    为什么要写这一篇随笔呢?最近做项目的过程中,遇到很多页面在要显示文本时,有一部分是固定的文本,有一部分是动态获取的,并且格式各式各样.一开始采取比较笨的办法,把他拆分成一个个文本控件,然后对不同的控件 ...

  4. Java Web入门学习（二） Eclipse的配置

    Java Web学习(二) Eclipse的配置 一.下载Eclipse 1.进入Eclipse官网,进行下载 上图,下载Eclipse IDE for JaveEE Developers 版本,然后 ...

  5. (转)MySQL 主从复制搭建，基于日志（binlog

    原文:http://blog.jobbole.com/110934/ 什么是MySQL主从复制 简单来说,就是保证主SQL(Master)和从SQL(Slave)的数据是一致性的,向Master插入数 ...

  6. auguements实参对象的数组化

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. PTA (Advanced Level) 1018 Public Bike Management

    Public Bike Management There is a public bike service in Hangzhou City which provides great convenie ...

  8. rvm的安装, 使用rvm, 安装ruby, 以及gem的使用 (转)

    http://blog.163.com/digoal@126/blog/static/1638770402012425111617904/ rvm 全称Ruby Version Manager,  确 ...

  9. python之virtualenv的简单使用

    什么是virtualenv? virtualenv可以创建独立Python开发环境,比如当前的全局开发环境是python3.6,现在我们有一个项目需要使用django1.3,另一个项目需要使用djan ...

  10. javascript 基础知识-1

    1, stringObject.charAt(index) : 返回指定位置(index)的字符 2, RegExpObject.exec(string), 用于检索字符串(string)中正则表达式 ...