Numpad JavaScript Control

UPDATE (2010/03/17)

I’ve got a request to randomize the position of the buttons. I’ve updated the download link so it points to the new version.

Enabling the random positioning of the buttons can be achieved by passing an option in the constructor

numPad = new NumpadControl({Randomize: false});


Numpad JavaScript Control

Working on a web UI project, I found out that it can be annoying, even confusing, to have to abandon the mouse to start entering numbers in a text box.

The form I was building was mostly consisting of drop-down lists, used to narrow down a selection. List boxes are convenient because they can be manipulated with the mouse only. One control in the form required the user to drop the mouse and start typing a numeric value in the box. That’s why I thought it would be a good idea to have a virtual numpad appear next to that box, to allow the user to click the numbers instead of typing them, a bit like a calendar control.

The Numpad JavaScript control in action.

The Numpad JavaScript control in action.

Download the control.

The control has been tested in IE6+, Firefox 3 & Opera 9

How to use:

Here is a sample HTML page containing a text box. The Numpad Control is being attached to that text box when the user clicks it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns="" xml:lang="en" lang="en">
    <title>Num Pad Control test page</title>
    <script type="text/javascript" src="Controls.js"></script>
    <script type="text/javascript">
    var txtNumber = null;
    var numPad = null;

    window.onload = function ()
        numPad = new NumpadControl();

        txtNumber = document.getElementById("txtNumber");

        txtNumber.onfocus = function ()


    <input type="text" id="txtNumber" />


Tags: , , ,

13 Responses to “Numpad JavaScript Control”

  1. Ton Says:

    i would like to modify this script. for function ability. now this script can use one element only. Please intruduce!

  2. Backer Says:

    Thanks so much for your script.

  3. Oliver Mercado Says:

    Is it possible to randomize the position of the buttons? Your Control works great..

  4. Eren Kesdi Says:

    I want to change the font size, is it possible?

  5. Eren Kesdi Says:

    and backspace 🙂

  6. Kevin Says:

    I am writing a program which will allow me to open a specific verse of the Bible. I thought this number pad would help, but when I push the “V” button, all that happens is the buttons buttons disappear. What must I do in order to use the number that I entered rather than sit there and stare at it?

    • saezndaree Says:

      The control is bound to a text input (see the code sample). That text input is populated with what has been entered using the numpad control. So just use something like
      var myNumber = parseInt(myTextInput.value, 10);
      in order to get that value.

  7. Kevin Says:

    I put the line into the program that you told me, but I must be doing something wrong. I put it in one place, and the numpad did-not show up, I put it in another place and it came up above the text box. where is the best place to insert this line into the program?

  8. Kevin Says:

    Is there a way to have a backspace button rather than a Clear button?

  9. Kevin Says:

    I figured it out. The numpad program works great.

  10. eric Says:

    can there be a decimal point instead ov the v button

  11. Kevin Says:

    I used the numpad with other programs, and it works great. Is there a way to have 2 numpads side by side for another program that I would like to put together?

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: