JavaScript Bible, Gold Edition part 202 pps

Listing 25-6 continued} } Enter any positive integer: TEXTAREA Element Object Properties cols rows NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5 Example Use The Evaluator to play w

Trang 1

Listing 25-6 (continued)

} }

</SCRIPT>

</HEAD>

<FORM>

Enter any positive integer: <INPUT TYPE=”text” NAME=”numeric”

onChange=”checkIt(this.form)”><P>

</FORM>

</BODY>

</HTML>

TEXTAREA Element Object

Properties

cols rows

NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5

Example

Use The Evaluator to play with the colsand rowsproperty settings for the Results textarea on that page Shrink the width of the textarea by entering the following statement into the top text box:

document.forms[0].output.cols = 30

And make the textarea one row deeper:

document.forms[0].output.rows++

TEXTAREA.cols

Trang 2

createTextRange()

Example

See the example for the TextRange.move()method in Chapter 19 to see how to

control the text insertion pointer inside a TEXTAREA element

Chapter 26 Examples

The following sections contain examples from Chapter 26, “Select, Option, and

FileUpload Objects.”

SELECT Element Object

Properties

length

Example

See Listing 26-1 for an illustration of the way you use the lengthproperty to help

determine how often to cycle through the repeat loop in search of selected items

Because the loop counter, i, must start at 0, the counting continues until the loop

counter is one less than the actual length value (which starts its count with 1)

SELECT.length

Trang 3

Example

The following statement toggles between single and multiple selections on a SELECT element object whose SIZEattribute is set to a value greater than 1:

document.forms[0].mySelect.multiple = !document.forms[0].mySelect.multiple

options[index]

Example

See Listings 26-1 through 26-3 in the printed chapter for examples of how the

optionsarray references information about the options inside a SELECT element

options[index].defaultSelected

Example

The following statement preserves a Boolean value if the first option of the SELECT list is the default selected item:

var zeroIsDefault = document.forms[0].listName.options[0].defaultSelected

SELECT.options[index].defaultSelected

Trang 4

Example

The following statement assigns the index integer of the first option of a SELECT

element named listNameto a variable named itemIndex

var itemIndex = document.forms[0].listName.options[0].index

options[index].selected

Example

To accumulate a list of all items selected by the user, the seeList()function in

Listing 26-4 systematically examines the options[index].selectedproperty of

each item in the list The text of each item whose selectedproperty is trueis

appended to the list I add the “\n “inline carriage returns and spaces to make the

list in the alert dialog box look nice and indented If you assign other values to the

VALUEattributes of each option, the script can extract the options[index].value

property to collect those values instead

Listing 26-4: Cycling through a Multiple-Selection List

<HTML>

<HEAD>

<TITLE>Accessories List</TITLE>

function seeList(form) {

var result = “”

for (var i = 0; i < form.accList.length; i++) {

if (form.accList.options[i].selected) {

Continued

SELECT.options[index].selected

Trang 5

Listing 26-4 (continued)

result += “\n “ + form.accList.options[i].text }

} alert(“You have selected:” + result) }

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<P>Control/Command-click on all accessories you use:

<OPTION SELECTED>Color Monitor

<OPTION>Modem

<OPTION>Scanner

<OPTION>Laser Printer

<OPTION>Tape Backup

<OPTION>MO Drive

<OPTION>Video Camera

</SELECT> </P>

<P><INPUT TYPE=”button” VALUE=”View Summary ”

onClick=”seeList(this.form)”></P>

</FORM>

</BODY>

</HTML>

options[index].text

Example

To demonstrate the textproperty of an option, Listing 26-5 applies the text from a selected option to the document.bgColorproperty of a document in the current window The color names are part of the collection built into all scriptable browsers; fortunately, the values are case-insensitive so that you can capitalize the color names displayed and assign them to the property

SELECT.options[index].text

Trang 6

Listing 26-5: Using the options[index].text Property

<HTML>

<HEAD>

<TITLE>Color Changer 1</TITLE>

function seeColor(form) {

var newColor = (form.colorsList.options[form.colorsList.selectedIndex].text)

document.bgColor = newColor

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<P>Choose a background color:

<OPTION SELECTED>Gray

<OPTION>Lime

<OPTION>Ivory

<OPTION>Red

</SELECT></P>

</FORM>

</BODY>

</HTML>

options[index].value

Example

Listing 26-6 requires the option text that the user sees to be in familiar,

multiple-word form But to set the color using the browser’s built-in color palette, you must

use the one-word form Those one-word values are stored in the VALUEattributes of

each <OPTION>definition The function then reads the valueproperty, assigning it

to the bgColorof the current document If you prefer to use the hexadecimal

triplet form of color specifications, those values are assigned to the VALUE

attributes (<OPTION VALUE=”#e9967a”>Dark Salmon)

SELECT.options[index].value

Trang 7

Listing 26-6: Using the options[index].value Property

<HTML>

<HEAD>

function seeColor(form) { var newColor = (form.colorsList.options[form.colorsList.selectedIndex].value) document.bgColor = newColor

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<OPTION SELECTED VALUE=”cornflowerblue”>Cornflower Blue

<OPTION VALUE=”darksalmon”>Dark Salmon

<OPTION VALUE=”lightgoldenrodyellow”>Light Goldenrod Yellow

<OPTION VALUE=”seagreen”>Sea Green

</SELECT></P>

</FORM>

</BODY>

</HTML>

selectedIndex

Example

In the inspect()function of Listing 26-7, notice that the value inside the options

property index brackets is a reference to the object’s selectedIndexproperty Because this property always returns an integer value, it fulfills the needs of the index value for the optionsproperty Therefore, if you select Green in the pop-up menu, form.colorsList.selectedIndexreturns a value of 1; that reduces the rest of the reference to form.colorsList.options[1].text, which equals

“Green.”

SELECT.selectedIndex

Trang 8

Listing 26-7: Using the selectedIndex Property

<HTML>

<HEAD>

<TITLE>Select Inspector</TITLE>

function inspect(form) {

alert(form.colorsList.options[form.colorsList.selectedIndex].text)

}

</SCRIPT>

</HEAD>

<BODY>

<FORM>

<OPTION SELECTED>Red

<OPTION VALUE=”Plants”><I>Green</I>

<OPTION>Blue

</SELECT></P>

</FORM>

</BODY>

</HTML>

size

Example

The following statement sets the number of visible items to 5:

document.forms[0].mySelect.size = 5

value

SELECT.value

Trang 9

The function in Listing 26-6 that accesses the chosen value the long way can be sim-plified for newer browsers only with the following construction:

function seeColor(form) { document.bgColor = form.colorsList.value }

Methods

item(index) namedItem(“optionID”)

Example

The following statement assigns an OPTION element reference to a variable:

var oneOption = document.forms[0].mySelect.namedItem(“option3_2”)

Event handlers

onChange

Example

Listing 26-8 is a version of Listing 26-6 that invokes all action as the result of a user making a selection from the pop-up menu The onChangeevent handler in the

<SELECT>tag replaces the action button For this application — when you desire a direct response to user input — an appropriate method is to have the action trig-gered from the pop-up menu rather than by a separate action button

SELECT.onChange

Trang 10

Notice two other important changes First, the SELECT element now contains a

blank first option When a user visits the page, nothing is selected yet, so you

should present a blank option to encourage the user to make a selection The

func-tion also makes sure that the user selects one of the color-valued items before it

attempts to change the background color

Second, the BODY element contains an onUnloadevent handler that resets the

form The purpose behind this is that if the user navigates to another page and uses

the Back button to return to the page, the script-adjusted background color does

not persist I recommend you return the SELECT element to its original setting

Unfortunately, the reset does not stick to the form in IE4 and IE5 for Windows

(although this problem appears to be repaired in IE5.5) Another way to approach

this issue is to use the onLoadevent handler to invoke seeColor(), passing as a

parameter a reference to the SELECT element Thus, if the SELECT element choice

persists, the background color is adjusted accordingly after the page loads

Listing 26-8: Triggering a Color Change from a Pop-Up Menu

<HTML>

<HEAD>

function seeColor(list) {

var newColor = (list.options[list.selectedIndex].value)

if (newColor) {

document.bgColor = newColor

}

</SCRIPT>

</HEAD>

<FORM>

<OPTION VALUE=”cornflowerblue”>Cornflower Blue

<OPTION VALUE=”darksalmon”>Dark Salmon

<OPTION VALUE=”lightgoldenrodyellow”>Light Goldenrod Yellow

<OPTION VALUE=”seagreen”>Sea Green

</SELECT></P>

</FORM>

</BODY>

</HTML>

SELECT.onChange

Định dạng
Số trang	10
Dung lượng	93,42 KB