Question

我是JQuery的新手，我正在测试document.ready函数。我正在建立一个登录页面，目的是在加载登录页面时，我希望将光标放在（电子邮件）电子邮件地址＆＃39;字段。

document.ready功能代码很简单，如下所示：

    <script type="text/javascript">
         $(document).ready(function () {
                            document.getElementById("email").focus();
                            });
    </script>

我已经尝试将它放在HEAD元素中，甚至在BODY元素的末尾，但我似乎无法将光标放在“电子邮件地址”上。页面加载。

这里是整个代码（例如我将文档放在BODY元素末尾的位置）。

<head>
<link rel="stylesheet" type="text/css" href="/css/goeasyhome_logo.css" />
<link rel="stylesheet" type="text/css" href="/css/login.css" />
<script src="/javascript/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
    function showerror(input) {
        if (document.getElementById("email").childNodes.item(0).value.length == 0) {
        input.setCustomValidity("Please fill out this field");
    } else {
        input.setCustomValidity("Please enter a valid email address");
    }

alert('x');
</script>
</head>

<body>
<br />
<br />
<br />
<header>
    <div id="header-center-11x12">
        <img id="goeasyhome_logo_12x12" src="/images/goeasyhome_basic.png"
            alt="goeasyhome" />
    </div>
</header>

<br />
<div id="main-content">
    <form method="post" action="j_security_check">
        <div id="email">
            <input type="email" placeholder="Email Address" name="j_username"
                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"
                oninvalid="showerror(this)" onchange="this.setCustomValidity('')"
                required="required" />
        </div>
        <div id="password">
            <input type="password" placeholder="Password" name="j_password"
                required="required" />
        </div>
        <br />
        <div id="signin">
            <input type="submit" value="Sign In" />
        </div>
    </form>
    <br /> <a class="passwdsignup-color" href="/forgotpassword.jsp">Forgot
        Password? </a> <a class="passwdsignup-color signup-position"
        href="/signup.jsp">Sign Up?</a>
</div>
<script type="text/javascript">
$(document).ready(function () {
    document.getElementById("email").focus();
   });
</script>

Answer 1

使用jQuery选择器，并以实际输入为目标，而不是包含它的div：

$("#email input").focus()

您可能需要阅读jQuery Selectors

JQuery：未触发document.ready函数的放置

1 个答案: