Text Elements - Page 8

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:

<INPUT TYPE="text" NAME="myTextBox"
 SIZE=10 MAXLENGTH=15 VALUE="Hello World">

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 "ah ha 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:

<INPUT TYPE="text" NAME=txtReadonly VALUE="Look but don't change" 
 onfocus="window.document.form1.txtReadonly.blur()"
 READONLY=true>

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.

Try It Out: onmouseup and onmousedown - Page 7
Beginning JavaScript
Try It Out: A Simple Form with Validation - Page 9