zoukankan      html  css  js  c++  java
  • js 捕捉回车键触发登录,并验证输入内容

    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>
    
    
    
  • 相关阅读:
    MVC入门学习笔记(五)
    IIS搭配Serveru构建企业空间服务(一)
    HTMLTextBox基于WebBrowser的HTML编辑控件
    MVC入门学习笔记(一)
    MVC入门学习笔记(七)
    MVC入门学习笔记(十)
    关注以下.NET技术
    Notification状态栏通知
    Activity设置横屏显示
    通过xml文件与代码去除通知栏和标题全屏显示
  • 原文地址:https://www.cnblogs.com/xpwi/p/9906198.html
Copyright © 2011-2022 走看看