Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 30 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
30
Dung lượng
2,59 MB
Nội dung
ptg 372 Chapter 11 • Working with Forms and Input Devices 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 password entries, and do all of this on the fly. The following section shows you how to program input devices. Figure 11.24 Form data is displayed in another window, called a popup window. From the Library of WoweBook.Com ptg 11.5 Programming Input Devices (Controls) 373 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. form The name of the form where the textbox is defined. id Sets or returns the id of a text field. name The name used to reference the textbox. Continues window document form text From the Library of WoweBook.Com ptg 374 Chapter 11 • Working with Forms and Input Devices type The type of the input device; for example, text. readOnly Sets or returns whether or not a text field should be read-only. size Sets or returns the size of a text field. 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 blur() Removes focus away from the object. focus() Puts focus on the object. 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. EXAMPLE 11.17 <html> <head><title>Text Boxes</title></head> <body bgcolor="azure"> 1 <form name="form1" id="form1"> Enter your name:<br /> 2 <input type="text" name="namefield" id="namefield" size=30 value="Name: " 3 onFocus="document.form1.namefield.select()" /> 4 <! onFocus="this.select()"> > </form> Table 11.9 Properties of the text Object (continued) Property What It Describes From the Library of WoweBook.Com ptg 11.5 Programming Input Devices (Controls) 375 <br /> <font face=arial> <big> <script type="text/javascript"> // 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> "+ 5 document.form1.namefield.type); // document.write( "The type of the input device is:<em> "+ 6 // document["form1"]["namefield"].type); document.write( "<br /></em>The textbox is named:<em> "+ document.form1.namefield.name); document.write("<br /></em>The value in the text field is:<em>" + document.form1.namefield.value); document.write("<br /></em>The size of the text field is:<em>" + document.form1.namefield.size); // Using the id attribute of the element var tfield=document.getElementById("namefield"); document.write("<br />The id of the textbox is "+tfield.id); document.write("<br />The name of the textbox is "+ tfield.name+"<br />"); </script> </big> </font> </body> <html> EXPLANATION 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. EXAMPLE 11.17 (CONTINUED) From the Library of WoweBook.Com ptg 376 Chapter 11 • Working with Forms and Input Devices Figure 11.26 The textbox and its properties. EXAMPLE 11.18 <html> <head> <title>Assigning Value on the Fly to a Text Field</title> </head> <body bgcolor="aquamarine"> <font face=arial> <big> 1 <form name="form1" id="form1"> Enter your name 2 <input type="text" 3 name="yourname" id="yourname" size="60"/> <p></p> Click in the box 4 <input type="text" 5 name="message" id="message" size="60" 6 onClick="this.value='Greetings and Salutations, '+ document.forms["form1"]["yourname"].value+ '!';" /> <p> <input type="reset" /> </p> 7 </form> </big></font> </body> </html From the Library of WoweBook.Com ptg 11.5 Programming Input Devices (Controls) 377 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 show properties and methods of the password object. EXPLANATION 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. From the Library of WoweBook.Com ptg 378 Chapter 11 • Working with Forms and Input Devices 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. type The type of the input device (i.e., password). value The value attribute that will be assigned whatever the user types in the password field. window document form password From the Library of WoweBook.Com ptg 11.5 Programming Input Devices (Controls) 379 Table 11.12 Methods of the password Object Method What It Describes blur() Removes focus from the password box. focus() Puts focus on the password box. 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. EXAMPLE 11.19 1 <html> <head><title>Password Boxes</title> <script type="text/javascript"> 2 function verify(pw){ if ( pw.value == "letmein" ){ alert("The chamber door will open now!"); } 3 else{ alert("Sorry, you cannot enter. Please leave."); } } </script> </head> <body bgcolor="#330033"><font color="FFCCFF"> <div align="center"> <h2> Welcome To The Secret Chamber</h2> <img src="wizard.jpg"><br /> To enter, a password is required:<br /> 4 <form name="form1" id="form1"> 5 <input type="password" name="passwfield" size="30" 6 onBlur="return verify(this)"/> 7 <input type=button value="Knock to verify"/> </form> </div> </body> </html> From the Library of WoweBook.Com ptg 380 Chapter 11 • Working with Forms and Input Devices EXPLANATION 1 The function called verify() is defined with one parameter, a reference to a pass- word object. 2 If the value of the password box is equal to the string letmein, the user is told he can enter. 3 If the user didn’t type in the correct password, he or she will be sent a message in an alert box. 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. From the Library of WoweBook.Com ptg 11.5 Programming Input Devices (Controls) 381 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 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. From the Library of WoweBook.Com [...]... 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 From the Library of WoweBook.Com 11.5 Programming Input Devices (Controls) 383 window document form textarea Figure 11.32 How the textarea object is created within the JavaScript hierarchy... 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 window document form select option Figure 11.35 How the select object is created within the JavaScript hierarchy EXAMPLE 11.21 Drop-Down Menus... 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 From the Library of WoweBook.Com 394 Chapter 11 EXAMPLE 1 2 3 4 5 6 7 • Working with Forms and Input Devices 11.24 Radio Buttons function changeBg(f){ for (var... focus() Puts focus in the checkbox 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 EXAMPLE 1 2 3 4 5 6 7 11.25 Checkboxes function check(f){ var str=""; for (var i = 0; i < f.topping.length;i++){ if(f.topping[i].checked){... input type is a radio button, named color Only one button can be selected (see Figure 11 .42) The value is a hexadecimal color code When the user clicks this button, the onClick event handler is triggered and the handler function changeBg() is called, using the this keyword and the form object as its argument Figure 11 .42 Using radio buttons; only one can be checked Checkboxes Although radio buttons can... name of the checkbox object Figure 11.43 shows the JavaScript object hierarchy for the checkbox object Tables 11.19 and 11.20 list the properties and methods of the checkbox object From the Library of WoweBook.Com 396 Chapter 11 • Working with Forms and Input Devices window document form checkbox Figure 11.43 How the checkbox object is created within the JavaScript hierarchy Table 11.19 Properties of the... Figure 11.41 How the radio object is created within the JavaScript hierarchy From the Library of WoweBook.Com 11.5 Programming Input Devices (Controls) 393 To reach a value in the radio list, for example, you would use document.form1.radio1, where form1 is the name of the form, and radio1 is the name of the radio object Figure 11.41 shows the JavaScript object hierarchy for the radio object Tables... cheese" />Extra Cheese Pizza Toppings 10 Click here to check your order!! Press the pizza man to order! 12 ... expressions, a powerful pattern matching tool provided by JavaScript Checking for Empty Fields Forms often have mandatory fields that must be filled out before the form can be submitted The following example checks for empty fields EXAMPLE 1 2 3 4 5 6 7 11.26 An HTML Form and the onSubmit Event Handler function checkForm(yourinfo){ if(yourinfo.namestring.value... options object This property will result in true if an option has been selected; false otherwise See Example 11.23 EXAMPLE 1 2 3 4 5 6 11.23 Drop Down Menus function showme(form){ var choices=""; for (i=0;i< form.vacation.options.length;i++){ if( form.vacation.options[i].selected == true){ choices += form.vacation.options[i].text+"\n"; } } alert(choices); . 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. <font face=arial> <big> <script type="text /javascript& quot;> // How do we reference the form’s text field in JavaScript? // Go down the document tree: document.form[].element.property document.write(. 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