tab键的焦点始终在一个层里面

最新推荐文章于 2019-04-30 10:52:19 发布

原创最新推荐文章于 2019-04-30 10:52:19 发布 · 251 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #HTML #ViewUI

JAVASCRIPT 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的HTML登录页面实现，并使用jQuery为输入字段添加了键盘Tab导航功能，当用户按下Tab键时，焦点会跳转到第一个输入框。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="./javascripts/jquery-1.4.2.js"></script>
        <script type="text/javascript">
            $(function(){
                $('.modeDiv input:last').keydown(function(e){
                    if (e.keyCode == 9) {
                        $('.modeDiv input:first').focus();
                        return false;
                    }
                });

            });
        </script>
    </head>
    <body>
        <div class="modeDiv">
            <form action="#" method="post">
                <table class="login_table">
                    <tr>
                        <td>用户名：</td>
                        <td>
                            <input id="username" type="text" size="30" name="username" value="">
                        </td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td>
                            <input id="password" type="password" size="30" name="password" value="">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="align_right">
                            <input id="login" type="button" value="登录" />
                        </td>
                    </tr>
                </table>
            </form>
        </div>
    </body>
</html>