RobDog711.com - KB Article - Form Field Focus

KB Article

Title:

Form Field Focus

Texts

Intro:

This will focus the cursor to a specific form field. I use this a lot as it makes it easier for the user when the first common field already has the cursor (no clicking the field - Simply start typing).
I often will use the first simple version since my pages are simple and load fast enough but I added it here in case I need it at another date / time.

Code / Script:

First example:
---------------------------------------
<form ... name="myform">
<input name="myfield" ...>
...
</form>
<script type="text/javascript">
document.myform.myfield.focus();
</script>
---------------------------------------
Second example:
The user can start typing into text fields while the page is still loading. Then when the page has finished loading your script will fire and send focus back to the first field. This would be most annoying! You can test whether a field is in use before firing the focus script. Try this...
---------------------------------------
<html>
<head>
<script type="text/javascript">

var formInUse = false;

function setFocus()
{
if(!formInUse) {
document.theForm.text1.focus();
}
}

</script>
</head>

<body onload="setFocus()">
<form name="theForm">
<input type="text" name="text1" onfocus="formInUse = true;">
<input type="text" name="text2" onfocus="formInUse = true;">
<input type="text" name="text3" onfocus="formInUse = true;">
</form>
<img src="images/hugePicture.jpg" alt="huge image to slow down the loading process!">
</body>
</html>

Misc

Web link:

http://www.html-faq.com/htmlforms/?entryfocus

Views: 53 - Posted: Feb 18th, 2010 (Thu)
Category: JavaScript - Topic: Web Contruction

Author: RobDog

No associations

Comments: 0

No comments have yet been posted. Login to post a comment.