JQuery: Placement of document.ready function not triggered
Question
I'm newbie to JQuery and i am testing the document.ready function. I'm building a login page and the intention is upon login page loaded, I want the cursor to be placed (focus) on the 'Email Address' field.
The document.ready function code is simple as below:
<script type="text/javascript">
$(document).ready(function () {
document.getElementById("email").focus();
});
</script>
I have tried putting this in the HEAD element and even at the end of the BODY element but I can't seem to get the cursor on that 'Email Address' page upon loading.
Here's the whole code (eg where I put the document.ready at the end of the BODY element).
<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>
2 answers
solution1
1 ACCPTED 2016-03-16 18:15:42
Since you are selecting by id :
document.getElementById("email")
...you need to put the id attribute on your input element:
<input id="email" 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" />
solution2
0 2016-03-16 18:29:18
Use jQuery selectors, and target the actual input, not the div that encloses it:
$("#email input").focus()
You might want to read up on jQuery Selectors
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.