zoukankan      html  css  js  c++  java
  • 键盘事件(在输入框中输入内容后按回车键)

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <title>登录直接按回车的效果</title>
            <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
            <script type="text/javascript">
                $(function() {
                    $("input[type='text']:eq(0)").keyup(
                        function() {
                            if(event.keyCode == 13) {
                                $("input[type='password']:eq(0)").focus();
                            }
                        }
                    );

                    $("input[type='password']:eq(0)").keyup(
                        function() {
                            if(event.keyCode == 13) {
                                $("input[type='button']:eq(0)").click();
                            }
                        }
                    );

                    $("input[type='button']:eq(0)").click(
                        function() {
                            var result = "";
                            result += "账户是:" + $("input[type='text']:eq(0)").val();
                            result += " ";
                            result += "密码是:" + $("input[type='password']:eq(0)").val();

                            alert(result);
                        }
                    );

                    //屏蔽默认的浏览器右键菜单
                    $(document).bind("contextmenu", function(e) {
                        return false;
                    });

                    //绑定自定义右键菜单
                    $(document).mouseup(
                        function() {
                            console.debug("Button:" + event.button);
                            if(event.button == 2) {
                                $("div")
                                    .css("left", event.x)
                                    .css("top", event.y)
                                    .show();
                            }
                        }
                    );
                });
            </script>
        </head>

        <body>
            <table border="0">
                <tr>
                    <th>账户:</th>
                    <td>
                        <input type="text" />
                    </td>
                </tr>
                <tr>
                    <th>密码:</th>
                    <td>
                        <input type="password" />
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <input type="button" value="登录" />
                    </td>
                </tr>
            </table>
            <div style="border: solid blue 1px; 200px; height: 400px; display: none; position: absolute;">

            </div>
        </body>

    </html>

  • 相关阅读:
    mysql分表场景分析与简单分表操作
    Linux内嵌汇编
    window 和 linux x64差别
    sourcetree和gitlab配置图解
    QT如何管理组件(解决“要继续此操作,至少需要一个有效且已启用的储存库”问题)
    QT5.x应用在Mac OS X和Windows平台的发布过程
    python中读写二进制文件
    mysql分表的3种方法
    MySQL-C++封装类
    MySQL删除数据库时无响应解决办法
  • 原文地址:https://www.cnblogs.com/zhouguoshuai/p/8192191.html
Copyright © 2011-2022 走看看