Text Elements

The standard text element allows users to enter a single line of text. This information can then be used in JavaScript code, or be submitted to a server for server-side processing.

A text box is created using the <INPUT> tag, much as our button was, but by setting the TYPE attribute to text. Again, you can choose not to include the VALUE attribute, but if you do include it, then this value will appear inside the text box when the page is loaded.

In the example below, the <INPUT> tag has two additional attributes of SIZE and MAXLENGTH. The SIZE attribute determines how many characters wide the text box is, and MAXLENGTH determines the maximum number of characters the user can enter into the box. Both attributes are optional and use defaults determined by the browser.

For example, to create a text box 10 characters wide, with a maximum character length of 15, and initially containing the words 'Hello World,' our <INPUT> tag would be as follows:

The Text object that this element creates has a value property, which we can use in our scripting to set or read the text contained inside the text box. In addition to the common properties and methods we discussed earlier, the Text object also has the select() method, which selects or highlights all the text inside the text box. This may be used if the user has entered an invalid value, and we can set the focus to the text box and select the text inside it. This then puts the user's cursor in the right place to correct the data and makes it very clear to the user where the invalid data is.

The value property of Text objects always returns a string data type, even though it may be that number characters are being entered. If we use the value as a number then JavaScript normally does a conversion from a string data type to a number data type for us, but this is not always the case. For example, JavaScript won't do the conversion if the operation you're doing is valid for a string. If we have a form with two text boxes and we added the values returned from these, JavaScript will concatenate rather than add the two values, so 1 + 1 will be 11 and not 2. To fix this, we need to convert all the values involved to numerical data type, for example by using parseInt() or parseFloat(). However, if we subtracted the two values, an operation only valid for numbers, then JavaScript says "aha this can only be done with numbers so I'll convert the values to a number data type." So, 1 – 1 will be returned as 0 without using parseInt() or parseFloat(). This is a tricky bug to spot, so it's best to get into the habit of converting explicitly to save problems later.

As well as the common event handlers such as onfocus and onblur, the Text object also has the onchange, onselect, onkeydown, onkeypress, and onkeyup event handlers.

The onselect event fires when the user selects some text in the text box.

More useful is the onchange event which fires when the element loses focus if (and only if) the value inside the text box is different from the value it had when it got the focus. This enables us to do things like validity checks that occur only if something has changed.

As mentioned before, the onfocus and onblur events can be used for validating user input. However, they also have another purpose and that's to make a text box read-only. In IE 4.0+ and NN 6 we can use the READONLY attribute of the <INPUT> tag or the readOnly property of the Text object to prevent the contents being changed. However, this won't work on NN 4.x. We can get around this using the blur() method. All we need do is add an onfocus event handler to the <INPUT> tag defining the textbox, and connect it to some code that blurs the focus from the text box with the blur() method:

The onkeypress, onkeydown, and onkeyup events fire, as their names suggest, when the user presses a key, when they press a key down, and when a key pressed down is let back up.

I've actually put window in front of this just to make it clear what we are actually accessing. It would be very easy when reading the code to mistake status for a variable, so in this situation, although strictly unnecessary, putting the window in front does make the code easier to read, understand, and therefore debug.

The Password Text Box

The only real purpose of the password box is to allow users to type in a password on a page and to have its characters hidden, so that no one can look over their shoulder at it. However, when sent to the server the text in the password is sent as plain text – there is no encryption or attempt at hiding the text – so it's not a secure way of passing information.

Defining a password box is identical to a text box, except that the TYPE attribute is password:

This form element creates an associated Password object, which is almost identical to the Text object in its properties, methods, and events.

The Hidden Text Box

The hidden text box can hold text and numbers just like a normal text box, the difference being that it's not visible to the user. A hidden element? It may sound as useful as an invisible painting, but in fact it proves to be very useful.

To define a hidden text box we have the following HTML:

The hidden text box creates a Hidden object. This is available in the elements array property of the Form object and can be manipulated in JavaScript like any other object. Although it's only through its HTML definition or through JavaScript that we can actually set its value, like a normal text box its value is submitted to the server when the user submits the form.

So why are they useful? Let's imagine we had a lot of information that we need to obtain from the user, but to avoid having a page stuffed full of elements and looking like the control panel of the space shuttle, we decide to obtain the information over more than one page. The problem is how do we keep a note of what was entered in previous pages? Easy – we use hidden text boxes and put the values in there. Then, in the final page, all the information is submitted to the server – it's just that some of it is hidden. Anyway, we'll see more about this in the server-side scripting chapter.