Using Text Controls

We've already seen a good deal about text controls in this book, so we can skip the elementary aspects of using the value property and so on. The onchange event is a useful one JavaScript programmers should know about. This event occurs when the user has changed the text in a text control and "committed" the change by moving the focus away from the control (as by clicking another control). Here's an example putting onchange to workwhen the user enters text into the text field and then clicks outside the text field, the text from the text field is displayed in a <DIV> element (like other examples that use getElementById , you'll need NS6+ if you're using the Netscape Navigator):

(Listing 13-02.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using the onchange Event</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function displayText()   {   document.getElementById("div1").innerHTML =   "The text field holds: " + document.form1.text1.value   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using the onchange Event</H1>          <FORM NAME="form1">  <INPUT TYPE="TEXT" NAME="text1" ONCHANGE="displayText()">  <BR>              <DIV ID="div1">          </FORM>      </BODY>  </HTML>

Tip

Note that the onchange event does not occur as the user is entering or editing textfor that, see onkeydown , onkeypress , and onkeyup in Chapter 6. Or see the discussion of handling carriage returns, coming up next .

You can see the results of this code in Figure 13.2. If you want to read what the user has entered in a text control when he has just finished entering it, the onchange event is the one to use.

Figure 13.2. Using the `onchange` event.

graphics/13fig02.gif

Carriage returns (that is, pressing the Enter key) have a special place in text fields. By tradition, if a form has only one control, a text field, pressing the Enter key when the text field has the focus is the same as clicking a Submit buttoneven if the form doesn't have one. For that reason, you may be surprised to see the browser attempt to "submit" what's a purely local form when the user presses Enter. (If you haven't specified an URL for the form to be submitted to with the form's ACTION attribute, the browser attempts to send the data back to the URL of the current page with the text data in the text field appended to the URL like this: URL ?text1=hello! , where I'm assuming the name of the text field was text1 , and it held the text "hello!". )

You can handle Enter keys in text fields in the same way you can handle any individual keystrokeswith the onkeydown , onkeypress , and onkeyup events. To detect the Enter key, for example, you can check the key code passed to an onkeydown event handlerthe key code for the Enter key is 13 (corresponding to the ASCII and Unicode code for a carriage return). If you return false from an onkeydown event handler, the browser will assume you've handled the keystroke yourself and not do any processing on it. That's how you prevent a key from appearing in a text controlreturn false from the onkeydown event handler. (That's useful, for example, if you only want a user to enter numeric data, because you can check what they type as they type it and prevent any nondigits from appearing.) To prevent the browser from beeping when the user presses Enter in a text field, take a look at this code, which detects the Enter key (and so can initiate some action, such as submitting a form, when the user presses that key) and just displays a message when that key is seen:

(Listing 13-03.html on the web site)

 <HTML>      <HEAD>          <TITLE>Handling the Enter key</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function checkEnter(e)   {   if(navigator.appName == "Netscape") {   if(e.which == 13){   document.form1.text2.value = "You pressed Enter"   return false   } else {   return true   }   }   if (navigator.appName == "Microsoft Internet Explorer") {   if(window.event.keyCode == 13){   document.form1.text2.value = "You pressed Enter"   return false   } else {   return true   }   }   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Handling the Enter key</H1>          <BR>          <FORM NAME="form1">  <INPUT NAME="text1" TYPE="TEXT" SIZE="20" ONKEYDOWN="return checkEnter(  event)">  <BR>              <INPUT NAME="text2" TYPE="TEXT" SIZE="20">          </FORM>      </BODY>  </HTML>

You can see the results of this code in Figure 13.3.

Figure 13.3. Detecting the Enter key.

graphics/13fig03.gif

Here's another text control example, which we first saw in Chapter 6 (Listing 06-16.html on the web site). This example uses the onfocus event to display prompts to the user about what kind of data she should enter; it's a web page-based calculator that adds numbers , and each time one of the two text fields the user is supposed to enter an integer into gets the focus, this code uses the window.status property to display the prompt Enter an integer. in the browser's status bar:

 <HTML>      <HEAD>          <TITLE>An HTML Calculator</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function text1Prompt()   {   window.status = "Enter an integer."   }   function text2Prompt()   {   window.status = "Enter an integer."   }   function text3Prompt()   {   window.status = "The sum is displayed here."   }   function Add()   {   document.form1.text3.value =   parseInt(document.form1.text1.value) +   parseInt(document.form1.text2.value)   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>An HTML Calculator</H1>          <FORM NAME="form1">  <INPUT TYPE="TEXT" NAME="text1" ONFOCUS="text1Prompt()">   +   <INPUT TYPE="TEXT" NAME="text2" ONFOCUS="text2Prompt()">   <INPUT TYPE="BUTTON" ONCLICK="Add()" VALUE = " = ">   <INPUT TYPE="TEXT" NAME="text3" ONFOCUS="text3Prompt()">  </FORM>      </BODY>  </HTML>

You can see the results in Figure 6.12. (Note the message Enter an integer. in the status bar.)

Besides standard text fields, text controls also include the password control, which masks what the user types with a character such as an asterisk (*). The text entered in a password control is masked in this waythe control does not support copying to the clipboard, so someone can't copy the contents of the control and paste it somewhere to see the actual text. However, the text in the control is accessible to your code using the value property. Here's an example that reads and displays the actual text in a password control when the user presses the Enter key:

(Listing 13-04.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using Password Controls</TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--  function checkEnter(e)   {   if(navigator.appName == "Netscape") {   if(e.which == 13){   document.form1.text2.value = "The password is: " + document.form1.  text1.value   return false   } else {   return true   }   }   if (navigator.appName == "Microsoft Internet Explorer") {   if(window.event.keyCode == 13){   document.form1.text2.value = "The password is: " + document.form1.  text1.value   return false   } else {   return true   }   }   }  // -->          </SCRIPT>      </HEAD>      <BODY>          <H1>Type the password and press Enter</H1>          <BR>          <FORM NAME="form1">  <INPUT NAME="text1" TYPE="PASSWORD" SIZE="20" ONKEYDOWN="return checkEnter(  event)">  <BR>              <INPUT NAME="text2" TYPE="TEXT" SIZE="30">          </FORM>      </BODY>  </HTML>

You can see the results of this code in Figure 13.4.

Figure 13.4. Using a password control.

graphics/13fig04.gif

The other standard text control is the hidden control, which does not appear in the web page, but which can hold text. This control is great for holding data about a page you don't want the user to see. For example, you can hold the users' current purchases in a hidden field if their browser has cookies turned off. (Although note that hidden fields are very low security, because users can see the contents of the field if they view the HTML source of the web page.) Hidden controls offer you a good place to hold data in a web page. Here's an example where we're storing some default text in a hidden control and using it to restore the original text in a text field when the user clicks a button:

(Listing 13-05.html on the web site)

 <HTML>      <HEAD>          <TITLE>Using Hidden Controls</TITLE>          <SCRIPT LANGUAGE = JavaScript>              <!--  function restoreData()   {   document.form1.text1.value = document.form1.hidden1.value   }  //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>Using Hidden Controls</H1>          Edit the text, then click the button to restore the original text!          <FORM NAME="form1">              <INPUT TYPE="TEXT" VALUE="Hello from JavaScript" NAME="text1" SIZE="25">              <BR>              <INPUT TYPE = BUTTON VALUE="Restore default text" ONCLICK="restoreData()">  <INPUT TYPE = HIDDEN NAME="hidden1" VALUE = "Hello from JavaScript">  </FORM>      </BODY>  </HTML>

You can see the results of this code in Figures 13.5 and 13.6. When you load this page, Hello from JavaScript appears in the text field, but I've edited that to Hello from Java! in Figure 13.5. When I click the button in Figure 13.6, the original text, Hello from JavaScript , is restored from the hidden control to the text field.

Figure 13.5. Editing text in a text field.

graphics/13fig05.gif

Figure 13.6. Restoring the edited text with data from a hidden control.

graphics/13fig06.gif