Học JavaScript qua ví dụ part 42 pot

To reference a text field from JavaScript, go down the document tree, starting at the document, then to the form, and then the text element.. type Returns the type of form element a tex

11.5 Programming Input Devices (Controls)

With JavaScript, you can alter the contents of the form’s input devices dynamically (also

called controls or elements) Because each input device is an object, each has properties

and methods, and can be manipulated like any other JavaScript object (i.e., it can be

assigned to, changed, deleted, etc.) You can program checkboxes, assign values to text

areas and textboxes, change the value in fields, add choices to drop-down menus, verify

Figure 11.24 Form data is displayed in another window, called a popup window.

The text Object. The text object represents the HTML text field <input type=“text”>

and also has name and value fields To reference a text field from JavaScript, go down

the document tree, starting at the document, then to the form, and then the text element

To get a value in the text field, for example, you would use the following syntax:

document.form1.textbox1.value,

where form1 is the name of the form and textbox1 is the name of the text field Shown in

Figure 11.25 is the JavaScript object hierarchy for the text object Table 11.9 lists its

properties and Table 11.10 lists its methods

Figure 11.25 The text object within the JavaScript hierarchy.

Table 11.9 Properties of the text Object

Property What It Describes

accessKey By default, pressing an access key sets focus to the text object The

object receives focus when the user simultaneously presses the Alt key and the access key assigned to an object.

alt Sets or returns alternate text to display if a browser does not support

text fields.

defaultValue The value assigned to the value attribute, and the default value the user

sees in the textbox when it first appears.

disabled Sets or returns whether or not a text field should be disabled.

id Sets or returns the id of a text field.

window

document

form

text

readOnly Sets or returns whether or not a text field should be read-only.

tabIndex Sets or returns the tab order for a text field.

type Returns the type of form element a text field is.

value The value attribute that will be assigned whatever the user types in the

textbox.

Table 11.10 Methods of the text Object

Method What It Describes

handleEvent(event) Invokes the handler for a specified event.

select() Selects or highlights text in the box.

unwatch() Turns off the watch for a particular property.

watch() Watches, and when a property is changed, calls a function.

Table 11.9 Properties of the text Object (continued)

Property What It Describes

// How do we reference the form’s text field in JavaScript?

// Go down the document tree: document.form[].element.property

document.write( "The type of the input device is:<em> "+

document.write("<br />The id of the textbox is "+tfield.id);

document.write("<br />The name of the textbox is "+

1 The form starts here in the body of the document

2 The input type is a textbox, named namefield with a default value “Name: ”.

3 When the mouse cursor is clicked in this box, the onFocus event is triggered and

the select() method causes the value in the textbox to be highlighted.

4 Instead of using the long, drawn-out, DOM hierarchy, the this makes it easier to

reference this input type

5 The property for the textbox, named namefield, is accessed using the DOM

hier-archy The output is shown in Figure 11.26

6 An alternate way to access the property of the textbox is to shed the array format,

in this case a two-dimensional associative array

E X A M P L E 1 1 1 7 (C O N T I N U E D)

1 <form name="form1" id="form1">

Enter your name

The password Object. The password object is much like the text object except that

the input does not appear as text, but as asterisks or bullets, depending on the browser

The idea is to prevent a snoopy onlooker from seeing what is being typed in the box, but

this is hardly a safe or secure type of password If you look at the source of the HTML

document, anywhere the actual password is spelled out, it appears in plain text for the

viewer of the source

The password object parallels the HTML password field <input type=“password”> and

also has name and value fields To reference a text field from JavaScript, you go down

the document tree, starting at the document, the form, and then the text element To get

a value in the text field, for example, you would use document.form1.passwd.value, where

form1 is the name of the form and passwd is the name of the password field Figure 11.29

shows the JavaScript object hierarchy for the password object Tables 11.11 and 11.12

E X P L A N A T I O N

1 An HTML form called form1 is started.

2 The input type for this form is a textbox that will hold up to 60 characters

3 The name of the textbox is yourname.

4 The second input type is also a textbox

5 The name of this textbox is message.

6 The onClick event handler is triggered when the user clicks inside this textbox It

concatenates the message “Greetings and Salutations” to whatever was typed in the

first box, and assigns that value to this textbox, called message.

7 To clear all the boxes, the user can click the Reset button See Figures 11.27 and

11.28

Figure 11.27 The user enters his or her name in the first text field.

Figure 11.28 When the user clicks in the second textbox, a message appears.

Figure 11.29 The password object within the JavaScript hierarchy.

Table 11.11 Properties of the password Object

Property What It Describes

accessKey Sets or retrieves the keyboard key to access a password field.

alt Sets or retrieves an alternate text to display if a browser does not

support password fields.

defaultValue The value assigned to the value attribute, and the default value the

user sees in the password field when it first appears.

form A reference to the form where the password field is defined.

id Sets or retrieves the id of the password field Used with

getElementById() method.

name The name used to reference the password box Used by the browser to

set name/value pairs sent to a server when the form is submitted.

maxLength Sets or retrieves the maximum number of characters in the password

field.

readOnly Sets or retrieves whether or not the password field should be

read-only.

size Sets or retrieves the size of the password field.

tabIndex Sets or retrieves the tab order for the password field.

value The value attribute that will be assigned whatever the user types in the

Table 11.12 Methods of the password Object

Method What It Describes

handleEvent() Invokes the handler for a specified event (JavaScript 1.2).

select() Selects or highlights text in the box.

unwatch() Turns off the watch for a particular property.

watch() Watches, and when a property is changed, calls a function.

To enter, a password is required:<br />

4 <form name="form1" id="form1">

4 The HTML form named form1 starts here.

5 The input type is a password box When the user types something into the box, a

series of dots appears

6 The onBlur event handler function, called verify(), is invoked when the user

leaves the box and clicks his or her cursor anywhere else on the page The purpose

of the handler is to check that the user typed in a correct password

7 When the user clicks the button, the onBlur event handler is triggered See Figures

11.30 and 11.31

Figure 11.30 The password object.

The textarea Object. If you don’t have enough room to say it all in a text field, then

you can use the text area box for multiple lines of input The textarea object parallels the

HTML <textarea> tag The number of characters in a line is specified with the cols

attri-bute of the <textarea> tag, and the number of rows in the box is specified by the rows

attribute If the wrap attribute is defined, when the user reaches the end of a line, a

new-line will be inserted and the input will start on the next new-line; otherwise a scrollbar will

appear The textarea object, like the text object, has a number of properties and methods

that make it possible to access and change the text area from within a JavaScript

pro-gram These are shown in Tables 11.13 and 11.14

To reference a text area box from JavaScript, you go down the document tree, starting

at the document, then to the form, and then the textarea element To get a value in the

text area box, for example, you would use document.form1.textarea1.value, where form1

is the name of the form, and textarea1 is the name of the text area Figure 11.32 shows

the JavaScript object hierarchy for the textarea object.

Figure 11.31 The user enters a password that isn’t correct and receives the alert

message.

Table 11.13 Properties of the textarea Object

Property What It Describes

accessKey Sets or returns the keyboard key to access a textarea.

defaultValue The value assigned to the value attribute, and the default value the user

sees in the text area when it first appears.

disabled Sets or returns whether or not a textarea should be disabled.

id Sets or returns the id of a textarea.

readOnly Sets or returns whether or not a textarea should be read-only.

tabIndex Sets or returns the tab order for the textarea.

type The type of the input device; i.e., textarea.

value The value attribute that will be assigned whatever the user types in the

text area.

Table 11.14 Methods of the textarea Object

Method What It Describes

handleEvent() Invokes the handler for a specified event (JavaScript 1.2).

select() Selects or highlights text in the text area box.

unwatch() Turns off the watch for a particular property.

watch() Watches, and when a property is changed, calls a function.

1 <textarea name="story" rows="8" cols="60" >

Once upon a time, there were three little

document.write("<br /></em>The number of rows in the "+

4 "text area is:<em> "+document.form1.story.rows);

document.write("<br /></em>The value in the text area is:<em>"

document.write( "<br /></em>The number of cols in the text "

6 + "area is:<em>"+ document.form1.story.cols);

E X P L A N A T I O N

1 An HTML text area is defined Its name is story and it consists of 8 rows and 60

col-umns The text, “Once upon a time, there were three little ” appears in the text area.

2 The name of the text area is story It is a textarea object Its type is textarea.

3 The value of the name property is displayed.

4 The rows property of the text area contains the number of rows that were assigned

in the rows attribute of the text area.

5 This is the value of the text that appears inside the box

6 The cols property of the text area contains the number of columns that were assigned

in the cols attribute of the text area The output is shown in Figures 11.33 and 11.34.

Figure 11.33 The textarea object.

Selection Lists (Drop-Down Menus). The HTML <select> tag defines a field for

display as a drop-down or a scrolling box A select list consists of menu items called

options JavaScript supports a select object The select object can be named but the

options cannot However, the select object has an options property (unique to DOM 0)

that is an array of all the option items, so that if you have to get access to one of the

options, remove or add options, you can use the options array The selectedIndex property

contains a number that represents the index number of the option that has been

selected If, for example, the first option in the menu is selected, then the value of the

selectedIndex property is 0 (because array elements start at 0) To get a value in the

selec-tion list, you could use, for example, document.form1.select1.opselec-tions[0].value, where

form1 is the name of the form, select1 is the name of the select object, and options[0] is

the first option in the list Tables 11.15 and 11.16 list the properties and methods of the

select object Figure 11.35 shows the JavaScript object hierarchy for the select object.

Table 11.15 Properties of the select Object

Property What It Describes

disabled Sets or retrieves a value that indicates whether the user can interact with

the drop-down list.

form The name of the form where the select is defined.

id Sets or retrieves the id of a drop-down list.

length The number of items in the select list; same as options.length.

multiple Sets or retrieves whether or not multiple items can be selected.

options[] An array of option objects describing each of the selection options Can

modify select options (JavaScript 1.1) The options object has properties:

index length, text, selected, value

selectedIndex The integer index value of a selected option, –1 if no option is selected

This value can be modified If set to an index value, that option is selected, and all others deselected.

size Sets or retrieves the number of visible rows in a drop-down list.

tabIndex Sets or retrieves the index that defines the tab order for the select object.

type Two possible values for the select object; if multiple is on, the value is

select-one and if not, select-multiple.

Table 11.16 Methods of the select Object

Method What It Does

focus() Puts focus in the select box

handleEvent() Invokes the handler for a specified event (JavaScript 1.2)

unwatch() Turns off the watch for a particular property.

watch() Watches, and when a property is changed, calls a function.

Figure 11.35 How the select object is created within the JavaScript hierarchy.

2 <select name="menu1" size="4" >

3 <option name="choice1" value="Perl1">Intro to

1 The HTML form named form1 starts here The action and method attributes are not

included here because this form is not being sent to a server

2 The select tag starts a drop-down list named menu1; it has four options.

3 The options that will appear in the menu are listed

4 This ends the select list

5 The JavaScript program starts here It displays the properties of the select object

6 The name of the select object is displayed.

7 The number of options in the select list is displayed

8 The index value of the option selected by the user is displayed If no option has

been selected, the value of selectedIndex is –1 If one has been selected, the index

value of the option is displayed The options are in an array where the index starts

at 0 The first option is at index 0, the second option is index 1, and so on

9 The actual text shown in the list for the first option is displayed, followed by the

text in the second selection The output is shown in Figures 11.36 and 11.37

E X A M P L E 1 1 2 1 (C O N T I N U E D)

Figure 11.36 A selection list’s properties before anything has been selected.

Figure 11.37 A selection list’s properties after an item has been selected.

// Could also say: document.form1.menu1.selectedIndex

3 f.text1.value="PL100, Feb 3-7, 9am to 5pm, Room 2133,

Dr Baloney "

// Could also say: document.form1.text1.value

} if(f.menu1.selectedIndex == 1){

f.text1.value="PL200 Feb 10-13 9am to 5pm, Room 209B,

Ms Eclectic";

} if(f.menu1.selectedIndex == 2){

f.text1.value="UX101 Mar 2-6 9am to 5pm, Room 209,

Mr Nerdly";