Capturing Digits on a Textbox

We have already discussed on how we can capture keyboard events in textbox in article "Capturing KeyBoard Events in Javascript". Here, we would do some calculation using Javascript as user enters digits in a textbox. In the following example, we would ask user to enter a number in Inch, and we would instantly convert it to Feet and show it within a span element.

So, we have a textbox as shown below :
<input type='text' id='txtbox' onkeyup="fkeyup(event)" onkeydown="return fkeydown(event)"  >

and a span element next to it, where the result will be shown :
<span id='result'></span>

On this textbox, we would have the following effects ::

1. Only digits are accepted, no characters are allowed except Right & left Arrow, Del, Backspace and Dot (decimal point '.') characters.

2. The calculation will be done as soon as user enters a digit.

So, for the point no. 1 above, we need to capture 'keydown' event on the textbox. The 'keydown' event is fired when a key is pressed on an textbox element and before the character is rendered within the textbox. After the character is rendered or cursor is moved or some other action takes place within the textbox, the 'keyup' event is fired.

For point no. 2 above, we will do the calculation taking the digit rendered within the textbox. So, we'll capture the 'keyup' event.

So, the above input element has 2 events captured : 'keydown' and 'keyup'. So, check the Javascript functions below, we would discuss every piece of it soon.

<script type='text/javascript'>
// This function restricts 'character key entry' on the textbox
function fkeydown(e)
{
   var key = e.keyCode ; 
   if(!((key >= 48 && key <= 57 ) || key == 190 || key == 8  || key == 37 || key == 39 || key == 46)) return false;
}

// The function DOES the calculation
function fkeyup(e)
{
 var val = document.getElementById('txtbox').value;
 val =  (val == '' ? 0 : val);
 var result = !isNaN(val) ? parseFloat(val/12) : 'Error';
  document.getElementById('result').innerHTML = result + " Feet";
}
</script>

This is a simple Inch >> Feet converter. Enter Inch in this TextBox :: 
<input type='text' id='txtbox' onkeyup="fkeyup(event)" onkeydown="return fkeydown(event)"  >
<span id='result'></span>

Two events 'keyup' and 'keydown' events are handled by two separate functions "fkeyup()" and "fkeydown()". Let's check the fkeydown() function first. 

The keyCode is stored in variable 'key'. Next we check if the key is a valid digit 0-9 or dot (.) or Backspace or left/right Arrows or Delete key. If we get something else, we simply return 'false' and as a result, nothing is rendered on the textbox. So, the word "return" is very important when we are setting the 'keydown' handler on the input element by saying "onkeydown='return fkeydown(event)'".

Next, in the 'keyup' event, after the entered digit is rendered within the textbox, fkeyup() function is called. Within this 'fkeyup()' function :

a. we get the textbox's value and store it in a variable called 'val'. 
b. We check whether the given value is a valid number by calling isNaN() function, if it is valid, we divide it by 12 and get the resultant value as a float number.
c. Then we show the result in the '#result' span element.

Check the screenshot below :