[Chapter 21] Reference: Text
Author: David Flanagan
Date: Fri Aug 29 11:20:23 1997

#

| Chapter 21 JavaScript Reference |

# Text Element

## Name

Text Element---a graphical text input field

## Availability

Navigator 2.0, Internet Explorer 3.0; enhanced in Navigator 3.0

## Synopsis

    form.name
    form.elements[i]

## Properties

`defaultValue`

  A read-only string that specifies the initial value to appear in the input field. Specified by the `VALUE` attribute of the `<INPUT>` tag.

`form`

  A read-only reference to the Form object that contains the Text element.

`name`

  A read-only string, set by the HTML `NAME` attribute, that specifies the name of the Text element. This is also the `name` that can be used to reference the Text element as a property of its form.

`type`

  A read-only string that specifies the type of this form element. For Text elements, it has the value "text". Available in Navigator 3.0 and later.

`value`

  A read/write string that specifies the value contained in the input field (which is also the value sent to the server when the form is submitted). The initial value of this property is specified by the `VALUE` attribute.

## Methods

`blur()`

  Remove the keyboard focus from the Text element.

`focus()`

  Set the keyboard focus to the Text element. When focus is set, all keystrokes are automatically entered into this element.

`select()`

  Highlight all the text in the Text element, and enter a special mode so that future input replaces the highlighted text.

## Event Handlers

`onblur()`

  Invoked when a user action causes the Text element to lose the keyboard focus.

`onchange()`

  Invoked when the user changes the value in the Text element and moves the keyboard focus elsewhere. This event handler is not invoked for every keystroke in the Text element, but only when the user completes an edit.

`onfocus()`

  Invoked when a user action causes the Text element to gain the keyboard focus.

## HTML Syntax

A Text element is created with a standard HTML `<INPUT>` tag, with the addition of optional attributes for event handlers:

    <FORM>
        ...
      <INPUT
        TYPE="text" specifies that this is a Text element
        [ NAME="name" ]   a name that can later be used to refer to this element
        specifies the name property
        [ VALUE="default" ]   the default value transmitted when the form is submitted
        specifies the defaultValue property
        [ SIZE=integer ]  how many characters wide the element is
        [ MAXLENGTH=integer ] max allowed number of input characters
        [ onBlur="handler" ]  the onblur() event handler
        [ onChange="handler" ]    the onchange() event handler
        [ onFocus="handler" ] the onfocus() event handler
      >
        ...
    </FORM>

## Description

The Text element represents a text input field in a form. The `SIZE` attribute specifies the width, in characters, of the input field as it appears on the screen, and the `MAXLENGTH` attribute specifies the maximum number of characters the user will be allowed to enter.

Besides these HTML attributes, `value` is the main property of interest for the Text element. You can read this property to obtain the user's input, or you can set it to display arbitrary (unformatted) text in the input field.

## Usage

Use the Password element instead of the Text element when the value you are asking the user to enter is sensitive information, such as a password that should not be displayed openly on the screen. Use a Textarea element to allow the user to enter multiple lines of text.

When a form contains only one Text or Password element, the form will automatically be submitted if the user strikes the Return key in that Text or Password element. In many forms, this is a useful shortcut. In some, however, it can be confusing if the user strikes Return and submits the form before entering input into other form elements such as Checkboxes and Radio buttons. You can sometimes minimize this confusion by placing Text elements with their default submission action at the bottom of the form.

## See Also

"Element", "Form", "Password", "Textarea"

taint() |  | Text.blur()