Click here to Skip to main content
13,291,084 members (69,359 online)
Click here to Skip to main content
Add your own
alternative version


38 bookmarked
Posted 19 Jul 2004

Numeric Keypad Web User Control

, 19 Jul 2004
Rate this:
Please Sign up or sign in to vote.
Use this control when your users don't have access to the keyboard (like at a touchscreen kiosk).

Sample Image - TCKeypad.jpg


This small web user control is a numeric keypad that is useful for applications that run on touch-screen kiosk computers where the users may not have access to the keyboard (like in a manufacturing facility or airport).


On some of my applications, users don't have access to the keyboard or mouse, and the application is running in kiosk-mode on a touch screen. Sometimes, they need to enter a secured area of the application, and need to enter a numeric pass code. This is where the Keypad Web User Control comes in.

Using the code

In your web project, you need to add the Keypad.ascx (and associated .ascx.vb files). This contains all of the internal keypad functionality including JavaScript.

Next, as with other web user controls, you need to add a local variable in your web form:

Protected WithEvents Keypad1 As Keypad

Note that the name of this local variable must be named Keypad1 because there is some hard-coding in the JavaScript (see the Points of Interest, below). For your initial page load, you probably want to make sure the keypad is initially hidden and the user will click a button to show it:

Private Sub Page_Load(ByVal sender As System.Object, _
                      ByVal e As System.EventArgs) Handles MyBase.Load
    If Not Page.IsPostBack Then
    End If
End Sub

When the user clicks on your "Show Keypad" button, you make the keypad visible by calling the Show() method. This method accepts an optional parameter that identifies the source. This source is used when the user is finished and you need to know for which field they where editing (more on this below).

Private Sub btnShowKeypad1_Click(ByVal sender As System.Object, _
                   ByVal e As System.EventArgs) Handles btnShowKeypad1.Click
    Keypad1.IsPassword = False
End Sub

Optionally, you set the IsPassword property. If IsPassword=True, then the textbox on the keypad will show '*' instead of numbers.

The keypad control will raise two events depending on whether the user clicked "OK" or "Cancel". You need to handle both of these. In the demo, the Value from the keypad is copied to a textbox in a form. If the user clicks "Cancel", the keypad is simply hidden. You may want to redirect to a different page. In either case, the demo also sets a label identifying which button was clicked.

Private Sub Keypad1_OnOKClicked() Handles Keypad1.OnOKClicked
    Select Case Keypad1.Source
        Case "Value1"
            Me.txtValue1.Text = Keypad1.Value
        Case "Value2"
            Me.txtValue2.Text = Keypad1.Value
    End Select

    Me.lblStatus.Text = "You clicked OK"
End Sub

Private Sub Keypad1_OnCancelClicked() Handles Keypad1.OnCancelClicked
    Me.lblStatus.Text = "You clicked Cancel"
End Sub

By default, the keypad is a pale-yellow color. If you define a CSS style named .Keypad, you can alter the appearance. The demo uses this to give it a nice drop-shadow:

      BACKGROUND-COLOR: khaki 
      BORDER-RIGHT: goldenrod thin outset; 
      BORDER-LEFT: goldenrod thin outset; 
      BORDER-TOP: goldenrod thin outset;    
      BORDER-BOTTOM: goldenrod thin outset; 

Points of Interest

There are some things I would like to fix in this control:

  • The local variable must be named Keypad1 because it's hard-coded in the JavaScript.
  • The control uses hidden labels where it should use the ViewState directly.
  • It would be nice to dynamically set the CSS class.


The original compile included a post-back each time a keypad button was clicked. This worked, but caused unnecessary posts to the server. The current version handles everything on the client side until the OK or Cancel buttons are clicked.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Barry Etter
Web Developer
United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

GeneralMy vote of 4 Pin
Marek Kajta11-Aug-10 23:04
memberMarek Kajta11-Aug-10 23:04 
Generalvery nice job Pin
www.marcjohnson.us11-Jun-10 4:51
memberwww.marcjohnson.us11-Jun-10 4:51 
GeneralFantastic control, saved me a bunch of time! Pin
Mattegna13-Aug-07 10:11
memberMattegna13-Aug-07 10:11 
QuestionIs this for real? Pin
mattgb110-Jul-07 7:23
membermattgb110-Jul-07 7:23 
Generaltouch screen juego (ayuden vean help) Pin
chyno198620-Jun-06 8:24
memberchyno198620-Jun-06 8:24 
GeneralSend Key : Num Pad 0 Pin
Vitoto5-Jul-05 21:26
memberVitoto5-Jul-05 21:26 
GeneralHelp Pin
Sean Wu29-Jul-04 5:43
memberSean Wu29-Jul-04 5:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.171207.1 | Last Updated 20 Jul 2004
Article Copyright 2004 by Barry Etter
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid