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

value

The value property reflects the current text located in a given text object (field). It is not equivalent to any HTML attribute. You can read and set this property at any time. The fields content is updated immediately upon setting. Although we have been using this property throughout this chapter, here is another example which shows how to reference the value attribute of the first element of the first form in a page:

document.forms[0].elements[0].value

Password Object

HTML Syntax

Another possible value for the TYPE attribute is password. It is similar to the text option except that, instead of displaying the users input, it responds to any typed character with a predefined single character, such as an asterisk (*). The general syntax of this object is as follows:

<INPUT
 TYPE="password"
 NAME="passwordName"
 [VALUE="contents"]
 [SIZE="integer"]
 [MAXLENGTH="integer"]
 [onBlur="handlerStatement"]
 [onChange="handlerStatement"]
 [onFocus="handlerStatement"]
 [onSelect="handlerStatement"]>


Figure 22-7.  A simple text are with no initial.

The value property is an asterisk character (or any other character chosen by the browser). The additional properties are identical to those of the text input type. Here is a simple password box code:

Password: <INPUT TYPE="password" NAME="pswrd" SIZE=15 MAXLENGTH=20
VALUE="">

Here is the appearance after typing a six-character string in the text box, bgates for example:

The value of the password box is the typed-in string, not the shown asterisks. The value is hidden so it cannot be seen by someone standing behind the user.

JavaScript Access

Like all other elements, there are four ways to access a password object via JavaScript:

[window.]document.formName.passwordName
[window.]document.formName.elements[index]
[window.]document.forms[index].passwordName
[window.]document.forms[index].elements[index]

All methods and element references adhere to one of these alternatives.

Event Handlers

The password event handlers are identical to those of the text object in all aspects. Refer to earlier discussion in this and other chapters.

Properties and Methods

The password objects methods are identical to those of the text object:

  • focus
  • blur
  • select

The password objects properties are:

  • defaultValue
  • name
  • value

The password object was not very useful in Netscape Navigator 2.0 because JavaScript was not allowed to access its value. Starting with versions 3.0, JavaScript on Navigator and IE can freely access the value attribute as if it is a text object. In terms of JavaScript, the password object is identical to the text object. The only difference is that the value of the password field is never displayed.

Textarea Object

HTML Syntax

Multiple lines of text can be entered into a form via text areas which are defined by the <TEXTAREA></TEXTAREA> tag pair. You should always name a text area and specify its size. The general syntax of the <TEXTAREA> tag is as follows:

<TEXTAREA
 NAME="textareaName"
 ROWS="integer"
 COLS="integer"
 WRAP="off | virtual | physical"
 [onBlur="handlerStatement"]
 [onChange="handlerStatement"]
 [onFocus="handlerStatement"]
 [onSelect="handlerStatement"]>
 textToDisplay
</TEXTAREA>

The attributes are:

  • NAMEspecifies the name (label) of the text area element. It is very difficult to work with unnamed text areas, so always name your text areas according to JavaScript naming conventions.
  • ROWSspecifies the number of text rows in the text area. Since Netscape Navigator and Microsoft Internet Explorer use different size fonts in text fields, you cannot set the text area size in pixels by setting ROWS.
  • COLSspecifies the number of text columns in the text area. It is equal to the number of characters in one text line.

Here is a capture of a text area in Netscape Navigator:

It is possible to initialize the text area by placing text between the <TEXTAREA> and </TEXTAREA> tags in the following fashion:

<TEXTAREA NAME="comments" COLS=35 ROWS=5>
Write any comments regarding this page here.
Don't forget to mention your e-mail address.
</TEXTAREA>

Carriage return characters are interpreted as new lines in this text zone. Netscape Navigator enables you to write HTML tags in the text area by simply placing the script between the opening and closing TEXTAREA tags. MSIE 3.0 does not support this feature, though, so you should avoid using it altogether.

Another attribute accepted by the <TEXTAREA> tag is WRAP. It can be set to one of the following values:

  • OFFdo not wrap lines (default value).
  • VIRTUALwrap lines on the screen but refer to them as one line otherwise.
  • PHYSICALinsert actual line breaks (CR characters) in the string.

JavaScript Access

There are four ways to access a textarea object via JavaScript:

[window.]document.formName.textareaName
[window.]document.formName.elements[index]
[window.]document.forms[index].textareaName
[window.]document.forms[index].elements[index]

Event Handlers

The textarea objects event handlers are identical to those of the text object.

Properties and Methods

Like event handlers, all properties and methods are exactly the same as those of the text object and password object. Please refer to previous listings for the text object in order to learn about its properties, methods, and event handlers.

Inserting new line Characters

A text area field is actually a multiline text field. Printing output to a textarea object is somewhat more complicated than printing to a text object due to the extra complication of new line insertion. This is especially important when the WRAP attribute is set to off and you are interested in avoiding a long horizontal text span.

Since the new line character is not uniform across different platforms, inserting a new line is not as simple as inserting any other printable character. The new line character on Unix- and Macintosh-based machines is \n, while Windows operating systems require the \r\n pair. The simplest way to work around the problem is to test the actual platform and insert the corresponding new line character. Here is a function that automatically returns the correct string for the users platform:

function getNL() {
  if (navigator.appVersion.lastIndexOf('Win') != 1)
  return "\r\n"
/* else */
 return "\n"
}

You can assign the new line character in the following fashion:

var NL = getNL()

Now, you can use the functions return value to place a multiple-line text in a textarea object. Here is a simple example:

document.forms[0].elements[0].value = "line 1" + NL + "line 2"


Important note:  Netscape Navigator 3.0 supports \n as a new line character on all platforms. However, Microsoft Internet Explorer 3.0 requires a platform-dependent new line character.


Previous Table of Contents Next


With any suggestions or questions please feel free to contact us