- Therefore, only the text-style object properties apply to the hidden object.. - tag to let all visible frames occupy 100% of the space and assign the rest. - The field contents may survive unloading of the page, but whether this happens and for how many navigations away from the page the contents last depends on the visitor’s cache settings (or if the browser is Internet Explorer 3, in which case no values preserve the unloading of a document). - If the user quits Navigator, the field entry is lost.. - Text Object. - Creating a text object:. - Accessing text object properties or methods:. - The text object is the primary medium for capturing user-entered text. - When a field has focus, either the text insertion pointer flashes, or any text in the field may be selected. - The inverse user action — clicking or tabbing away from a text object — is called a blur. - Selecting occurs when the user clicks and drags across any text in the field. - changing occurs when the user makes any alteration to the content of the field and then either tabs or clicks away from that field.. - If you have conflicting actions in the onFocus= and onSelect= event handlers, your scripts can do some weird things to the user’s experience with your page. - Many newcomers also become confused by the behavior of the change event.. - At that point, instead of a blur event being sent to the field, only a change event is sent, triggering an onChange= event handler if one is defined for the field. - Many scripters dream of possibilities for text objects that, alas, are simply not possible in the current implementation, including the capabilities to dim the text box to prevent entry, select a portion of the text, and change font and color attributes.. - In the meantime, some new functionality was added to the object in Navigator 4. - Therefore, if users of your page enter values into some fields, or your scripts display results in a field, all that data will be there later, even if the user performs a soft reload of the page or navigates to dozens of other Web pages or sites. - These actions cause the browser to load the desired page from scratch, regardless of the content of the cache. - If the field entry is a number and you need to pass that value to methods requiring numbers, you have to convert the text to a number with the help of the parseInt() or parseFloat() global functions.. - Though your users and your scripts are free to muck with the contents of a text object by assigning strings to the value property, you can always extract (and thus restore, if necessary) the string assigned to the text object in its <INPUT>. - The defaultValue property yields the string parameter of the VALUE= attribute.. - restores the contents of the page’s lone field to the value assigned to it in the <INPUT>. - Listing 22-1: Resetting a Text Object to Default Value. - <TITLE>Text Object DefaultValue</TITLE>. - Text object names are important for two reasons. - First, if your HTML page is used to submit information to CGI scripts, the input device passes the name of the text object along with the data to help the server program identify the data being supplied by the form. - Second, you can use a text object’s name in its reference within JavaScript coding. - Be as descriptive about your text object names as you can. - Avoid punctuation symbols with the exception of the very safe underscore character.. - Consult Listing 22-2, where I use the text object’s name, convertor , as part of the reference when assigning a value to the field. - Therefore, assuming that your script doesn’t know the name of the first object in the first form of a document, the statement is. - A text object’s value property is the two-way gateway to the content of the field. - A reference to an object’s value property returns the string currently showing in the field. - Your script places text of its own into a field for display to the user by assigning a string to the value property of a text object. - To see the results of either listing, enter a value and then either press the Tab key or click anywhere outside of the field.. - Enter any lowercase letters into the field and click out of the field. - I pass a reference to the entire form object as a parameter to the event handler. - Listing 22-2: Getting and Setting a Text Object’s Value. - <TITLE>Text Object Value</TITLE>. - Both utilize the shortcut object reference to get at the heart of the text object. - Listing 22-3 passes the field object — contained in the this reference — to the function handler. - Listing 22-3: Passing a Text Object (as this) to the Function. - With the function removed from the document, the event handler attribute of the <INPUT>. - The right-hand side of the assignment expression extracts the current contents of the field and (with the help of the toUpperCase() method of the string object) converts the original string to all uppercase letters. - The result of this operation is assigned to the value property of the field.. - The application of the this keyword in the previous examples may be confusing at first, but these examples represent the range of ways in which you can use such references effectively. - Using this by itself as a parameter to an object’s event handler refers only to that single object — a text object in Listing 22-3. - At the other end of the scale, you can use similar-looking syntax to specify a particular property of the “this” object. - Thus, in the last example, I zeroed in on just the value property of the current object being defined — this.value . - Although the formats of this.form and this.value appear the same, they encompass entirely different ends of the range of focus — simply by virtue of the meaning of the keywords to the right of the period. - conversely, if you know that a text object has a property named “value,” you will know that a reference to this.value focuses only on the value property of the currently defined object. - Just as a camera lens blurs when it goes out of focus, a text object blurs when it loses focus — when someone clicks or tabs out of the field. - The pointer does not proceed to the next field in tabbing order, as it does if you perform a blur by tabbing out of the field manually.. - For a text object, having focus means that the text insertion pointer is flashing in that text object’s field (it means something different for buttons in a Windows environment). - The cursor usually appears at the beginning of the text. - While the select() method selects the text in the designated field, focus is not handed to the field.. - See Listing 22-4 for an example of an application of the focus() method in concert with the select() method.. - See the discussion of the window.handleEvent() method in Chapter 14 and the event object in Chapter 33 for details on this ubiquitous form element method.. - Selecting a field under script control means selecting all text within the text object. - A typical application is one in which an entry validation script detects a mistake on the part of the user. - After alerting the user to the mistake (via a. - window.alert() dialog box), the script finishes its task by selecting the text of the field in question. - Not only does this action draw the user’s eye to the field needing attention (especially important if the validation code is checking multiple fields), Note. - Trying to select a text object’s contents with a click of a button is problematic.. - One problem is that a click of the button brings the document’s focus to the button, which disrupts the selection process. - No penalty exists for issuing both methods, and the extra insurance of the second method provides a more consistent user experience with the page.. - Selecting a text object via script does not trigger the same onSelect= event handler for that object as the one that triggers if a user manually selects text in the field. - A click of the Verify button in Listing 22-4 sends the text object’s contents for validation as all numbers. - If the validation returns false, the script preselects the field entry for the user. - To make sure the selection takes place, you first set the document’s focus to the field and then select its contents. - <TITLE>Text Object Select/Focus</TITLE>. - All three of these event handlers should be used only after you have a firm understanding of the interrelationships of the events that reach text objects. - as he or she tabs out of the field). - Whenever a user makes a change to the text in a field in Listing 22-6 and then either tabs or clicks out of the field, the change event is sent to that field, triggering the onChange= event handler.. - Whichever event(s) you trap for, you can also extract the ASCII (or UniCode in Internet Explorer 4) value of the key. - The way you do this is to pass the keyword event as one of the parameters to the function called by the event handler:. - Notice that the event keyword is not a string, but rather a reference to the event object generated by the press of the key. - In this latter format, the event object is automatically passed to the function whose reference is assigned to the event for the field object. - You can control whether the keyboard action ever reaches the display area of the text object. - Like many of the objects in the document model, if an event handler evaluates to return false , the event goes no further than the function invoked by the event handler. - but if the handler evaluates to return true , then the natural behavior of the event carries on.. - By checking the value of each key before it reaches the value of the field, the event handler function can alert the user about the correct kind of characters to enter. - To work with both Navigator and Internet Explorer, the function does one differentiation about how to extract the value of the typed character, depending on the browser version. - After that, the value is in the charCode variable, and the rest of the function works the same for both platforms.. - Notice the construction of the event handler such that it evaluates to return true or return false , depending on the results of the function. - Many properties of the password object were blocked from scripted access until Navigator 3. - This might lead a scripter to capture a user’s Web site password for storage in the document.cookie of the client machine. - See the text object discussion for the behavior of password object’s properties, methods, and event handlers. - Neither the user nor a script can resize the field, nor does text wrap within the visible rectangle of the field unless you set the WRAP attribute to. - All properties, methods, and event handlers of text objects apply to the textarea object. - Therefore, refer to the previous listings for the text object for scripting details.. - In the parlance of JavaScript’s literal string characters, the carriage return consists of some combination of the new line ( \n ) and return ( \r ) character. - From Navigator 3 onward, if you specify any one of the combinations in the preceding list, all platforms know how to automatically convert the data to the form native to the operating system. - Therefore, you can set the value of a textarea object to “1\r\n2\r\n3” in all platforms, and a columnar list of the numbers 1, 2, and 3 will appear in those fields. - Upon reading those values again by script, you can see that the carriage returns are in the form of the platform (as shown in the previous table).. - I am not a fan of the hidden object for use on client-side-only JavaScript. - If I want to deliver with my JavaScript-enabled pages some default data collections or values, I do so in JavaScript variables and arrays as part of the script.. - For more persistent storage, use the document.cookie property or genuine text fields in hidden frames, even if just for the duration of the visit to the page.. - For information about the properties of the hidden object, consult the earlier listing for the text object.
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt