Page 4 —
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="first_text"
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>
<script language="JavaScript">
<!-- hide me
function writeIt(the_word)
{
var word_with_return = the_word + "\n";
window.document.first_form.the_textarea.value +=
word_with_return;
}
// show me -->
</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 word_with_return = the_word + "\n";
... initializes a new variable, word_with_return, and sets it equal to the string that was passed into the function concatenated with a "\n". (Remember, the "\n" is standard computerese for "new line.")
The next line ...
window.document.first_form.the_textarea.value += word_with_return;
... 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:
window.document.first_form.the_textarea.value =
window.document.first_form.the_textarea.value + word_with_return;
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:
Here are the form and the two links:
<form name="method_form">
<input type="text" name="method_text" size=40 value="Hey, hey, we're the monkeys">
</form>
<a href="#" onMouseOver="window.document.method_form.method_text.focus();">Mouseover to focus</a>
<a href="#" onMouseOver="window.document.method_form.method_text.select();">Mouseover to select</a>
Accessing the methods of a text field is just like accessing the methods of any object: object_name.method(). The name of a text field is window.document.form_name.text_field_name. So, to call the focus() method on the text field above, we call:
window.document.method_form.method_text.focus();
That's pretty much all there is to know about text fields and textareas. We're about ready to try the first exercise for this lesson. First, however, there's one more thing you need to know about form handlers before you can do the exercise.
next page»
|
