Detecting Text Field Events

Text fields understand onBlur, onFocus, and onChange. The onFocus event occurs when someone clicks inside a text field. onBlur happens when somebody moves out of a text field by clicking outside of it, or hitting "tab." onChange happens when somebody changes what's in the text field and then moves outside the text field.

Try doing these things in the text field and see what happens in the textarea below it.

Here's how this works. The text field looks like this:

<INPUT TYPE="text" NAME="text1"
onFocus="writeIt('focus');"
onBlur="writeIt('blur');"
onChange="writeIt('change');">

Each of the event handlers calls the function writeIt(), which I've defined in the header. The header looks like this:

<HEAD> <TITLE>Text Field Events</TITLE>

function writeIt(theWord) {
var returnWord = theWord + "\n";

document.form1.theTextarea.value += returnWord;
}

</SCRIPT>

</HEAD>

This should all look pretty familiar to you. The first few lines are the typical JavaScript preamble and the function definition. The first line in the body of the function

var returnWord = theWord + "\n";

initializes a new variable, returnWord, and sets it equal to the string that was passed into the function concatenated with a "\n".

The next line

document.form1.theTextarea.value += returnWord;

says, "set the value of the textarea to its current value plus the new variable." This shortcut was covered when we learned about loops. It's the same as saying

document.form1.theTextarea.value =
document.form1.theTextarea.value + returnWord;

It just takes less time. So far, we've seen a property of text fields and textareas (the value) and some events that they can handle. The remaining thing to know about these elements is the methods that they can handle: blur(), focus(), and select().

Here are some links to show you how focus() and select() work. Beware that they sometimes stop working after the first time:


onMouseOver to focus	onMouseOver to select

Here are the form and the two links:

<FORM NAME="methodForm">
<INPUT TYPE="text" NAME="methodTxt" VALUE="Hey, hey, we're the monkeys">
</FORM>

<A HREF="javascript:void(null)"
onMouseOver="document.methodForm.methodTxt.focus();">
Mouseover to focus
</A>
<A HREF="javascript:void(null)"
onMouseOver="document.methodForm.methodTxt.select();">
Mouseover to select
</A>

Accessing the methods of a text field is just like accessing the methods of any object: objectName.method(). The name of a text field is document.formName.txtFieldName. So, to call the focus() method on the text field above, we call:

document.methodForm.methodTxt.focus();

That's pretty much all there is to know about text fields and textareas.