Textboxes for Input

An effective way of performing script input and output operations is through use of textbox fields. You can use textboxes, <input type="text" />, as input areas into which users enter information, and you can use them as areas to display script output.

Working with Textbox Values

You can assign a value to a textbox or determine what value currently appears in the textbox by reference to the its value property. The following example shows a textbox into which a message is written by assigning a text string to this property.

Figure 3-12. Assigning text to the value property of a textbox.

window.onload=init;

function init() {
 var OutputBtn = document.getElementById("OutputBtn");
 OutputBtn.onclick = Assign;
}

function Assign() {
  document.getElementById("OutputField").value = 
    "Here is the output message.";
} 

<input id="OutputField" type="text" style="width:200px">
<input type="button" value="Assign Value" id="OutputBtn">

Listing 3-8. Code to assign text to the value property of a textbox.

In a like manner, you can determine the current contents of a textbox. The following script displays the contents of the previous textbox in an accompanying <span> area.

Figure 3-13. Displaying the value property of a textbox.

window.onload = init;

function init() {
  var BtnShowValue = document.getElementById("BtnShowValue");
  BtnShowValue.onclick = Show;
}

function Show() {
  document.getElementById("OutputArea").innerHTML = 
    "The value in the textbox is \"" +
    document.getElementById("OutputField").value +
    "\"";
}
<input type="button" value="Show Value" id="BntShowValue">
<span id="OutputArea"></span>

Listing 3-9. Code to display the value property of a textbox.

Performing Arithmetic with Text Fields

It is important to keep in mind that all textbox values are treated as strings, even numeric characters. Therefore, you may need to explicitly convert numeric strings to numbers before performing arithmetic with them. For example, if you try to add the contents of two textboxes containing numeric characters, the "+" operator is interpreted as a concatenation operator as demonstrated below.

Figure 3-14. Concatenating numeric textbox values.


window.onload = init;

function init() {
  var AddBtn = document.getElementById("AddBtn");
  AddBtn.onclick = Add;
}

function Add() {
  document.getElementById("Output").value =
    document.getElementById("FirstNo").value +
    document.getElementById("SecondNo").value;
}

<input id="FirstNo" type="text" value="10" style="width:50px"/> + 
<input id="SecondNo" type="text" value="20" style="width:50px"/>
<input type="button" value=" = " id="AddBtn">
<input id="Output" type="text" style="width:50px"/>

Listing 3-10. Code that concatenates the value properties of textboxes.

Recall that strings containing numerals are converted to numbers by use of the parseInt() and parseFloat() methods. The former converts to integer numbers; the latter converts to floating-point numbers. The previous application can be made to correctly add the textbox values by applying parseFloat() to them.

Figure 3-15. Adding numeric textbox values.


window.onload = init;

function init() {
  var AddBtn = document.getElementById("AddBtn");
  AddBtn.onclick = Add;
}

function Add() {
  document.getElementById("Output").value =
    parseFloat(document.getElementById("FirstNo").value) +
    parseFloat(document.getElementById("SecondNo").value);
}

<input id="FirstNo" type="text" value="10" style="width:50px"> + 
<input id="SecondNo" type="text" value="20" style="width:50px">
<input type="button" value=" = " id="AddBtn">
<input id="Output" type="text" style="width:50px">

Listing 3-11. Code to add textbox values.

This situation arises only in applying the "+" operator, which can mean either to concatenate or to add. You can perform subtraction, multiplication, or division directly with numeric textbox values since JavaScript automatically converts numeric strings to numbers for these operations. Still, you might wish to always convert textbox numerals into numbers prior to performing any type of arithmetic on them.

Evaluating Arithmetic Expressions

Recall that the eval() method is applied to a string to treat it as a JavaScript statement; it "executes" the string. Therefore, any string of characters appearing in a textbox that evaluates to a valid JavaScript statement can have the eval() method applied to perform the operation.

In the following example, a textbox contains an alert() method to display its enclosed text string. When the button is clicked, this statement is run by applying the eval() method to it.

Statement:

Figure 3-16. Evaluating a textbox string as a JavaScript statement.

window.onload=init;

function init() {
   var BtnExecute = document.getElementById("BtnExecute");
   BtnExecute.onlick = Execute;
}

function Execute() {
   eval(document.getElementById("Statement").value);
}

Statement:
<input id="Statement" type="text" style="width:200px" 
  value='alert("Hello World!")'>
<input type="button" value="Run" id="BtnExecute" >

Listing 3-12. Code to apply the eval() method to a textbox string.

When the evaluated string is composed entirely of numeric characters and arithmetic operators, the eval() method treats it as an arithmetic expression and computes the results. Thus, you can create a modest interactive calculator with a textbox into which an arithmetic expression is entered.

Expression:

Figure 3-17. An interactive calculator.

window.onload = init;

function init() {
   var btnCompute = document.getElementById("btnCompute");
   btnCompute.onclick = Compute;
}

function Compute() {
  document.getElementById("Answer").value = 
     eval(document.getElementById("Expression").value);
}
Expression:
<input id="Expression" type="text" value="10 + (20 - 5) / 2">
<input type="button" value=" = " id="btnCompute">
<input id="Answer" type="text" style="width:70px">

Listing 3-13. Code for an interactive calculator.

You can, in fact, enter any valid arithmetic expression into the above textbox field and the evaluated result appears in the output field. Try it.

Textbox Events and Handlers

In its service as a page input or output area, a textbox supports two event handlers to trap events surrounding a textbox and to trigger scripts in response. The onfocus event handler traps the focus event, occuring when focus is brought to a textbox by either clicking inside the box or by pressing the Tab key to enter the box. The onblur event handler traps the blur event, occuring when focus is removed from a textbox by either clicking outside the box or pressing the Tab key to leave the box.

Event Handler	Description
onfocus	Traps the focus event: when focus is brought to a textbox by clicking inside or pressing the Tab key to enter the textbox.
onblur	Traps the blur event: when focus is removed from a textbox by clicking outside or pressing the Tab key to leave the textbox.

Figure 3-18. Textbox event handlers.

Consider the following textbox. When you click inside the box, a focus event occurs and its onfocus event handler runs a script; when you click outside the box to remove focus from it, a blur event occurs and its onblur event handler runs a script.

Click inside the box:

Figure 3-19. Trapping focus and blur events surrounding a textbox.

window.onload = init;

function init() {
   var MyText = document.getElementById("MyText");
   MyText.onfocus = Focus;
   MyText.onblur = Blur;
}

function Focus() {
   document.getElementById("MyText").value = "Now, click outside the box."
}

function Blur() {
   document.getElementById("MyText").value = "Now, click inside the box."
}

Click inside the box:
<input type="text" style="width:250px" id="MyText">

Listing 3-14. Code to trap focus and blur events surrounding a textbox.

Textbox Methods

Associated with the onfocus and onblur event handers are two textbox methods to perform focus and blur events under script control. Its focus() method brings focus to a textbox; its blur() method removes focus from a textbox.

Method	Description
focus()	Brings focus to a textbox; positions a blinking cursor in the field.
blur()	Removes focus from the textbox.

Figure 3-20. Textbox methods.

The focus() method brings focus to the textbox, with the effect of displaying a blinking text cursor in the field. Scripting this method is often done to place a blinking cursor in the first textbox field of a Web form, saving the user an initial mouse click in the field to place the cursor for data entry. Usually, the script is run when the page initially loads into the browser - on the page's load event, which is trapped by an onload event handler.

window.onload = init;

function init() {
   document.getElementById("textboxId").focus();
}

The blur() method removes focus from a textbox. This method can be used, for example, to keep users from changing or erasing displayed text. The following textbox contains a message that cannot be changed or erased because focus cannot be brought to the textbox - the cursor cannot be positioned in the field.

Figure 3-21. Removing focus from a textbox.

<input type="text" value="Do not erase or change this message!"
  style="width:270px; font-weight:bold; color:red" 
  onfocus="this.blur()"/>

Listing 3-15. Code to remove focus from a textbox.

Whenever you click in the box, bringing focus to it, the onfocus event hander removes focus with the textbox's blur() method. You can never position the cursor inside the textbox!