101Chapter 9Forms and Form ElementsFor the (Freelance web design) visible objects
101Chapter 9Forms and Form ElementsFor the visible objects in this category, event handlers are triggered from many user actions, such as giving a field focus (getting the text insertion pointer in the field) and changing text(entering new text and leaving the field). Most of your text field actions are triggered by thechange of text (the onchangeevent handler). In modern browsers, event handlers fire inresponse to individual keystrokes as well. Without a doubt, the single most used property of a text-related element is the valueprop- erty. This property represents the current contents of the text element. A script can retrieveand set its content at any time. Content of the valueproperty is always a string. This mayrequire conversion to numbers (see Chapter 6) if text fields are used to enter values for somemath operations. To demonstrate how a text field s valueproperty can be read and written, Listing 9-1 pro- vides a complete HTML page with a single-entry field. Its onchangeevent handler invokes theupperMe()function, which converts the text to uppercase. In the upperMe()function, thefirst statement assigns the text object reference to a more convenient variable: field. A lotgoes on in the second statement of the function. The right side of the assignment statementperforms a couple of key tasks. The reference to the valueproperty of the object(field.value) evaluates to whatever content is in the text field at that instant. That string isthen handed over to one of JavaScript s string functions, toUpperCase(), which converts thevalue to uppercase. The evaluated result of the right-side statement is then assigned to thesecond variable: upperCaseVersion. Nothing has changed yet in the text box. That comes inthe third statement where the valueproperty of the text box is assigned whatever theupperCaseVersionvariable holds. The need for the second statement is more for learningpurposes, so you can see the process more slowly. In practice, you can combine the actionsof steps two and three into one power-packed statement: field.value = field.value.toUpperCase(); Text Object BehaviorMany scripters look to JavaScript to solve what are perceived as shortcomings or behavioralanomalies with text-related objects in forms. I want to single these out early in your scriptingexperience so that they do not confuse you later. First, only the most recent browsers let scripts reliably alter the font, font size, font style, and textalignment of a text object s content. You can access changes through the element s style-relatedproperties (see Chapter 26). Second, most browser forms practice a behavior that was recommended long ago as an informalstandard by Web pioneers. When a form contains only one text inputobject, a press of theEnter/Return key while the text object has focus automatically submits the form. For two or morefields in browsers other than IE5/Mac and Safari, you need another way to submit the form (forexample, a Submit button). This one-field submission scheme works well in many cases, such asthe search page of most Web search sites. But if you are experimenting with simple forms con- taining only one field, you can submit the form with a press of the Enter/Return key. Submittinga form that has no other action or target specified means the page performs an unconditionalreload wiping out any information entered into the form. You can, however, cancel the submis- sion through an onsubmitevent handler in the form, as shown later in this chapter. Also, start- ing with version 4 browsers, you can script the press of the Enter/Return key in any text field tosubmit a form (see Chapter 25).