Article ID: 2555357 - Last Review: June 9, 2011 - Revision: 1.0

How to build a virtual keyboard in an HTML page

System TipThis article applies to a different operating system than the one you are using. Article content that may not be relevant to you is disabled.

On This Page

Expand all | Collapse all

INTRODUCTION

This article describes an All-In-One framework sample that is available for download. This code sample demonstrates a step-by-step guide that illustrates how to build a virtual keyboard in your HTML page. You can get the sample packages from the following download icons.
Back to the top

Difficulty level

Collapse this imageExpand this image

Back to the top

Download information

Collapse this imageExpand this image
Download
Download the package now. (http://download.microsoft.com/download/D/7/2/D72679FE-731F-4692-904A-43386E89CB7B/MSKB2555357j.exe)
Back to the top

Technical overview

Sometimes when users try to enter their passwords to access to a website, they may want to use a virtual keyboard instead of a real keyboard to protect the passwords from some kind of back-door software (for example, a Key-logger).

To create a virtual keyboard, you need to add several buttons to a page. When users click a certain button, the JavaScript function that handles the onclick event will input an appropriated character to a text box. However, to substitute for the real keyboard completely by using a virtual keyboard, you need more advanced logic to implement features for some special keys (for example, the Caps Lock and the Shiftkeys).
Back to the top

Sample overview

This sample contains an HTML page without any behind code. When you open the Default.htm page by using Microsoft Visual Studio, you can find the following two main parts:
  • JavaScript functions
  • HTML code for page layout and some input controls
To build a demo page, follow these steps:

Step 1

Add an HTML text box to the page:
<input id="tbInput" type="text" />
Step 2

Add an HTML div to a blank page and insert several input buttons into the div. Ten of these buttons stand for number 0 to number 9 and the last button stands for the Backspace button. Set the onclick events of the ten number buttons to input() function, and then set the parameter of the input() function to this. Additionally, set the onclick event of the Backspace button to del() function.
<div id="VirtualKey">
    <input id="btn1" type="button" onclick="input(this);" />
    <input id="btn2" type="button" onclick="input(this);" />
    <input id="btn3" type="button" onclick="input(this);" />
    <br />
    <input id="btn4" type="button" onclick="input(this);" />
    <input id="btn5" type="button" onclick="input(this);" />
    <input id="btn6" type="button" onclick="input(this);" />
    <br />
    <input id="btn7" type="button" onclick="input(this);" />
    <input id="btn8" type="button" onclick="input(this);" />
    <input id="btn9" type="button" onclick="input(this);" />
    <br />
    <input id="btn0" type="button" onclick="input(this)" />
    <input id="btnDel" type="button" value="Backspace" onclick="del();" />
</div>
Step 3

Create the input(e) and del() JavaScript functions on the page. The input(e) function enters the number into the text box by using the parameter e. The del() function deletes a number from the text box.
function input(e) {
    var tbInput = document.getElementById("tbInput”);
    tbInput.value = tbInput.value + e.value;
}
 
function del() {
    var tbInput = document.getElementById("tbInput");
    tbInput.value = tbInput.value.substr(0, tbInput.value.length - 1);
}
Note You can run the page and input a number to the text box by clicking the button from the virtual number keyboard. This sample code also provides a feature to rearrange the order of these ten buttons. Therefore, when users refresh the page, they will get the virtual keyboard in a random arrangement. To achieve this feature, run the code that is described in Step 4.

Step 4

Set the onload event of the page to load() function:
<body onload="load();">
Then, rearrange the order of the buttons:
function load() {
    var array = new Array();
 
    while (array.length < 10) {
        var temp = Math.round(Math.random() * 9);
        if (!contain(array, temp)) {
            array.push(temp);
        }
    }
    for (i = 0; i < 10; i++) {
        var btn = document.getElementById("btn" + i);
        btn.value = array[i];
    }
}
Note For more information about how to change the order of the number buttons, see the Default.htm file that is included in the download package.
Back to the top

Technology category

HTML, JavaScript
Back to the top

Languages

This code sample is available in the following programming languages:
Collapse this tableExpand this table
LanguageProject Name
HTML and  JavaScriptJSVirtualKeyboard
Back to the top

References

For more information how to use JavaScript along with ASP.NET, visit the following MSDN website: 
How to use JavaScript along with ASP.NET (http://msdn.microsoft.com/en-us/library/aa479011.aspx)
Back to the top

MORE INFORMATION

What is All-In-One Code Framework?

All-In-One Code Framework shows most Microsoft development techniques by using code samples in different programming languages. Each example is carefully selected, composed, and documented to show one common code scenario. For more information about All-In-One Code Framework, visit the following Microsoft website:
http://1code.codeplex.com (http://1code.codeplex.com/)
Back to the top

How to find more All-In-One Code Framework samples

To find more All-In-One Code Framework samples, search for "kbcodefx" together with related keywords on the Microsoft support Web site. Or, visit the following Microsoft website:
All-In-One Code Framework samples (http://support.microsoft.com/search/default.aspx?query=kbcodefx)
Rapid publishing disclaimer
Microsoft corporation and/or its respective suppliers make no representations about the suitability, reliability, or accuracy of the information and related graphics contained herein. All such information and related graphics are provided "as is" without warranty of any kind. Microsoft and/or its respective suppliers hereby disclaim all warranties and conditions with regard to this information and related graphics, including all implied warranties and conditions of merchantability, fitness for a particular purpose, workmanlike effort, title and non-infringement. You specifically agree that in no event shall Microsoft and/or its suppliers be liable for any direct, indirect, punitive, incidental, special, consequential damages or any damages whatsoever including, without limitation, damages for loss of use, data or profits, arising out of or in any way connected with the use of or inability to use the information and related graphics contained herein, whether based on contract, tort, negligence, strict liability or otherwise, even if Microsoft or any of its suppliers has been advised of the possibility of damages.
Back to the top
Note This is a "FAST PUBLISH" article created directly from within the Microsoft support organization. The information contained herein is provided as-is in response to emerging issues. As a result of the speed in making it available, the materials may include typographical errors and may be revised at any time without notice. See Terms of Use (http://go.microsoft.com/fwlink/?LinkId=151500) for other considerations.
Back to the top
Keywords: 
kbcodefx kbinfo kbsurveynew kbnomt kbrapidpub atdownload KB2555357
Back to the top