The text field can link onBlur, onFocus and onChange events. When someone clicks inside the text field, the onFocus event occurs. If you click outside the text field or press the tab key, the onblur event will occur. The onChange event occurs if someone changes the content within the text domain and then goes to the area outside the text domain.
Try doing these things to see what happens in the text field below.
The following is the compilation method: encoding of text domain:
<input type="text" name="first_text" onFocus="writeIt('focus');" onBlur="writeIt('blur');" onChange="writeIt('change');">
Each event handler calls the function writeIt(), and the function has been defined. The encoding is as follows:
<script language="JavaScript">
<!-- hide me
function writeIt(the_word)
{
var word_with_return = the_word + "\n";
.first_form.the_textarea.value += word_with_return;
}
// show me -->
</script>
The first few lines are typical JavaScript predefined. Line 1 in the body
var word_with_return = the_word + "\n";
Initialize a variable word_with_return into a string processed by the function and add the line newline "\n". Note that "\n" is a standard computer instruction.
Next line
.first_form.the_textarea.value += word_with_return;
Set the value of the text area to its original value and add a new variable. Its function is equivalent to
.first_form.the_textarea.value = .first_form.the_textarea.value + word_with_return;
At present, we have learned the properties of text domain and text area (value). Next, we learn the methods used for processing text domain and text area: blur(), focus() and select().
The following link shows how focus() and select() work. Note that they may terminate the function after working once.
| Mouseover to focus | Mouseover to select |
The following is the encoding of the form and link:
<form name="method_form">
<input type="text" name="method_text" size=40 value="Hey, hey, we're the monkeys">
</form>
<a href="#" onMouseOver=".method_form.method_text.focus();">Mouseover to focus</a>
<a href="#" onMouseOver=".method_form.method_text.select();">Mouseover to select</a>
The method of using the method is the same as calling any object method: object_name.method(). The name of the literal field is .form_name.text_field_name, so the focus() method of the literal field can be called with the following statement.
.method_form.method_text.focus();