Online Documentation Server
 ÏÎÈÑÊ
ods.com.ua Web
 ÊÀÒÅÃÎÐÈÈ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ÏÎÄÏÈÑÊÀ

 Î ÊÎÏÈÐÀÉÒÀÕ
Âñÿ ïðåäîñòàâëåííàÿ íà ýòîì ñåðâåðå èíôîðìàöèÿ ñîáðàíà íàìè èç ðàçíûõ èñòî÷íèêîâ. Åñëè Âàì êàæåòñÿ, ÷òî ïóáëèêàöèÿ êàêèõ-òî äîêóìåíòîâ íàðóøàåò ÷üè-ëèáî àâòîðñêèå ïðàâà, ñîîáùèòå íàì îá ýòîì.




Previous Table of Contents Next

focus()

The focus() method focuses on a text object (or other form element object which is described later in this chapter). Focusing on a form element usually means that the window scrolls until the text field is viewable and the cursor is positioned at the beginning of the text in the field.

Although not mandatory, it is a good practice to give focus to a text object before accessing it. It will have a positive contribution to the script’s robustness.

When the page contains many fields, you can use the script-driven focus() method to emphasize one of them, thus “attracting” the user to it. The focus() method resembles the camera’s focus: It emphasizes a specific object and prepares it for further use.

The following HTML tag can be used to maintain focus on a text object (it may be useful if you have multiple text objects and the user is allowed to modify only one of them):

<INPUT TYPE="text" NAME="myField"
VALUE="" SIZE=15 onBlur="this.focus()">

When the text field loses focus, a blur event occurs, the onBlur event handler is triggered, and focus is given once again to the field.

The focus() method usually belongs to text objects (fields), but, as will be explained later in this chapter, other kinds of objects use it as well.

select()

The most useful method of the text object is the select() one. When you select a field via JavaScript, the entire text in the field is selected. Since this method is broken in Microsoft Internet Explorer 3.0, the focus here will be on Netscape Navigator.

Due to a bug, or rather a feature, in Navigator on some platforms, you must give a focus to a text field before selecting it. Suppose you have a document with one form that contains one element, a text object. The following script segment is needed in order to select that text field via JavaScript:

document.forms[0].elements[0].focus()
document.forms[0].elements[0].blur()

The select() method is extremely useful and very convenient when validating a form on the client side. For example, let’s say you have a form which accepts inputs from the user for several elements and validates each element in turn before submitting the data to the server. The most basic way to report an error is to display a message in an alert dialog box. More sophisticated error reporting includes automatic preparation of the form for the user’s corrections. Such preparation can be implemented by playing the focus() + select() method concert. When the script encounters a text field that contains invalid data, you can direct the cursor to that field and automatically highlight the interior text. The user can then write the new, correct value without even having to delete the invalid entry. Sounds quite complicated on the programmer’s behalf, but it is actually very simple. The following script and form demonstrate a simple validation and handy error reporting:

<HTML>
<HEAD>
<TITLE>Simple form validation</TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

function checkName(field) {
  if (field.value == "") {
   alert("Value is required")
   field.focus()
   field.select()
  } else
   if (field.value.split(" ").length < 2) {
alert("Enter full name")
field.focus()
field.select()
   }
}

function checkEmail(field) {
  if (field.value.indexOf("@") == –1) {
   alert("Enter a valid e-mail address")
   field.focus()
   field.select()
  }
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Full name: <INPUT TYPE="text" NAME="userName"
VALUE="" SIZE=15 onChange=
  "checkName(this)">
<BR>
Email address: <INPUT TYPE="text" NAME="email"
VALUE="" SIZE=15 onChange= 
  "checkEmail(this)">
</FORM>
</BODY>
</HTML>

Example 22-3. A simple form validation and error handling script.

The form in Example 22-3 includes two text objects: the user’s full name and e-mail address. The element (text field) object is passed as an argument to the two different event handler functions. The value property reflects the current string in the text field.

checkName() checks that the value of its calling object (text field) is not empty and that it contains exactly two words (with a separating space). If one of these rules is violated, an appropriate message is displayed, and the calling element (the userName text object) is focused and selected, indicating the invalid text field.

checkEmail() checks if the value of its calling text object contains an “at” character (@). If one is not found, an appropriate message is displayed, and the calling element (the email text object) is focused and selected. The text within the field is highlighted by the select() method of the second text object in the form. As you can see, the script conveniently uses this for all references to the form element objects. Also notice that the field checking is done per every mouse click anywhere inside the window.

Properties

defaultValue

The defaultValue property is a string indicating the default value of a text object. The default value is initially assigned to the VALUE attribute of the HTML tag, reflected also by JavaScript’s defaultValueproperty. Setting this property in JavaScript overrides the initial HTML values. You can set and read the defaultValue property at any time, even after layout has been completed. Since it reflects the field’s default value only (the one seen when the page loads or after resetting the form), this property cannot be used to dynamically update the text in the field.

If the HTML attribute VALUE is not specified, defaultValue defaults to an empty string, as if explicitly specifying VALUE="". Also note that Microsoft Internet Explorer 3.0 does not support this property.

The following script segment demonstrates a simple use of the defaultValue property to reset only a specific form element (a text object in this case), rather than resetting the entire form with the Reset button or the reset() method. Note that this script uses the value property which is discussed later. Here it is:

<SCRIPT LANGUAGE="JavaScript">
<!--
 
function resetField(sub) {
  document.forms[0].elements[sub].value = document.forms[0]
 .elements[sub].defaultValue
}

// -->
</SCRIPT>
<FORM NAME="fields">
<INPUT TYPE="text" NAME="field1"
VALUE="enter first" SIZE=15>
<A HREF="javascript:resetField(0)">reset</A><BR>
<INPUT TYPE="text" NAME="field2"
VALUE="enter second" SIZE=15>
<A HREF="javascript:resetField(1)">reset</A><BR>
<INPUT TYPE="text" NAME="field3"
VALUE="enter third" SIZE=15>
<A HREF="javascript:resetField(2)">reset</A><BR>
</FORM>


Figure 22-5.  A form that collects data about several people.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us