Auto-Focus Form Elements with JavaScript
Published Monday, December 4, 2006 @ 2:50 pm • 6 Responses
After digging through the WordPress source code, I stumbled upon this very useful JavaScript method for auto-focusing form elements upon page load. Here is the JavaScript code (place within the document head):
<script type="text/javascript">
function formfocus() {
document.getElementById('element').focus();
}
window.onload = formfocus;
</script>…and corresponding (X)HTML markup (abbreviated for clarity):
<form>
<input id="element" />
<input />
<input />
</form>In this example, the first form element (identified by id="element") will be automatically focused when the document loads, thus facilitating the process of entering data in the form. This technique would serve users well on login pages (wink, wink;), or anywhere forms are required on a repetitive basis.
Update: [ May 29th, 2007 ] - Here is a similar method of auto-focusing a form element with just a splash of JavaScript. Place the following code into an input element that contains a predefined field value and watch in amazement as the text string is automatically highlighted upon user focus. Here is the JavaScript snippet:
onfocus="this.select();"
..and here is a “live” example:
..and corresponding code:
<form action="http://domain.com/" method="post">
<div>
<input onfocus="this.select();" value="Select this input element and this text will be highlighted.." size="55" type="text">
</div>
</form>About this article
Related articles
- Quick JavaScript Tip: Auto-Highlight Form Inputs and Textareas
- Auto Clear and Restore Form Elements
- Unobtrusive JavaScript: Auto-Clear and Restore Multiple Form Inputs on Focus
- Unobtrusive JavaScript: 5 Ways to Remove Unwanted Focus Outlines
- Prevent JavaScript Elements from Breaking Page Layout when Following Yahoo Performance Tip #6: Place Scripts at the Bottom
- Go Back via JavaScript and PHP
- Optimize Convoluted Code via JavaScript
Dialogue
6 Responses Jump to comment form
December 3, 2007 at 9:14 pm
Hi friend,
Thank u very much for this logic and code.
I was searching for it and just found @ this place.
thank u very much.
i gonna use your code for my software.
thankz once again
MNP,
JiLMaiL.com
JiLMaiL Email Platform.
March 12, 2008 at 12:51 am
you can also always select the first element of the form:
aForm.elements[1].focus();
this way you don’t need to know the id of the first element
if you want to get the form and you just have one form:
var aForm = document.forms[1];
[ Comments are closed for this post. ]
If you have additional information, contact me.
1 • GasGiant
March 7, 2007 at 10:42 am
Since I use a common header for a number of PHP pages, some pages have forms while others do not. To keep from throwing an error on the pages where the element does not exist, I enclosed the focus() action inside an if() statement
function formfocus() {
if(document.getElementById(’element’)) {
document.getElementById(’element’).focus();
}
}
window.onload = formfocus;