Introduction
Secure login for bank sites also provide a virtual keyboard to enter the password in a public system. This project provides an implementation for a set pattern.
Using the code
The requirements for such a keyboard would be:
- Show all keys which can be used for the password field. This would include alphabets, numbers, and special characters.
- On click of each key, convert all keys to # so that somebody looking over the shoulder will not be able to figure it out.
- Provide Caps Lock, backspace, and Clear buttons.
Since all keys are similar in function apart from the value, we can use direct HTML and a template to create the bulk of the keyset.
<input type="button" value="a" id="btn1"/>
This would give us a button, however we want more. Hence we add the following events:
onmousedown
- change it to #onmouseup
- restore key valueonclick
- the complete action of clicking - write the character to the password box
This can be held by a variable for ease of use later on:
string buttonHtmlString = "<input type=\"button\" class=\"keys\"
value=\"{0}\" name =\"{1}\" id=\"btnVirKey\"
onclick=\"func_click(this.value);\" onmousedown = \"hashthekeys();\"
onmouseout=\"unhashthekeys();\" onmouseup=\"unhashthekeys();\" />";
Another aspect is, we are using up some screen area for displaying this, and hence we have to program for a fixed pattern of keys.
I have selected a format where the keys look like:
Hence, I am going to set a specific pattern to fit my area and randomize to that extent. You will have to find out how many keys fit into the screen area
and then decide on it. I decided to keep the width of my table to 300px, and on trial error basis, I have a max of 15 characters per line.
Generating the keys
I have created three lists, for each set of different characters I need.
List<string> listAlphabets = new List<string>();
List<string> listNumbers = new List<string>();
List<string> listSymbols = new List<string>();
I fill them up, programmatically or manually, as appeals to me.
private void CreateAlphabets()
{
for (int i =97; i <= 122; i++)
{
listAlphabets.Add(char.ConvertFromUtf32(i).ToString());
}
}
private void CreateNumberlist()
{
for (int i = 0; i < 10; i++)
{
listNumbers.Add(i.ToString());
}
}
private void CreateSymbolList()
{
string[] symbollist = new string[] {"!","@","#","$","%","^","&",
"*","(",")","_","-","+","=","~","`",""",":",";","'",
",",".","/","<",">","?","{","}","[","]","|","\\"};
listSymbols.AddRange(symbollist);
}
Initially, adding all keys to a list and then removing them on insertion will do the trick.
I add a row after the fifteenth button to fit with the pattern. The same goes with the other sets - numbers, symbols.
for (int i = 0; i < 26; i++)
{
int next = rand.Next(1,listAlphabets.Count) -1;
htmltbl.Append(string.Format(buttonHtmlString,
listAlphabets[next], listAlphabets[next]));
listAlphabets.RemoveAt(next);
if(i== 14)
{
htmltbl.Append("</td></tr><tr><td>");
}
}
For the JavaScript, we have to declare a form and have a common button name to enable ease of looping to set and reset the values.
We need a swap field for storing the actual value - name can be used for this.
We just append the value when the onclick
event triggers:
function func_click(charVal) {
finalresult = document.getElementById("txtoutput").value;
document.getElementById("txtoutput").value = finalresult + charVal;
}
The hashing and unhashing - since all the button names are the same, FormName.ButtonName[index]
is the easiest way to set and reset the button values.
function hashthekeys() {
for (var z = 0; z < document.formVitualKeyboard.btnVirKey.length; z++) {
document.formVitualKeyboard.btnVirKey[z].value = '#';
}
for (var z = 0; z < document.formVitualKeyboard.button2.length; z++) {
document.formVitualKeyboard.button2[z].value = '#';
}
}
function unhashthekeys() {
for (var z = 0; z < document.formVitualKeyboard.btnVirKey.length; z++) {
document.formVitualKeyboard.btnVirKey[z].value =
document.formVitualKeyboard.btnVirKey[z].name;
}
for (var z = 0; z < document.formVitualKeyboard.button2.length; z++) {
document.formVitualKeyboard.button2[z].value =
document.formVitualKeyboard.button2[z].name;
}
}
Backspace, Clear, and Caps Lock have custom functions, and the buttons are also defined separately.
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.