JavaScript: The Definitive Guide

Previous Chapter 21
JavaScript Reference
Next
 

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"


Previous Home Next
taint() Book Index Text.blur()

HTML: The Definitive Guide CGI Programming JavaScript: The Definitive Guide Programming Perl WebMaster in a Nutshell