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>

  • 相关阅读:
    开通博客第一天
    Vue 打包配置productionSourceMap 的记录
    supervisorctl 的 简单记录
    mvn打包方式记录
    springboot日志配置,关于logback
    springboot集成swagger
    关于mapper文件的bean
    elasticsearch 连接、操作记录
    关于前后端分离文件上传的些许问题
    代码优化--策略模式的四种表现
  • 原文地址:https://www.cnblogs.com/zhouguoshuai/p/8192191.html
Copyright © 2011-2022 走看看