虚拟键盘 模拟银行的

下载VirtualKeyboard_updated.zip - 21.52 KB  

登录银行我们常遇见只能使用虚拟键盘到登录系统, 这里我们将模拟的这个虚拟键盘

如图所示:

我们的需求

这种键盘的要求将

1。显示所有可使用的密码字段的键。这将包括字母，数字和特殊字符   

2。点击每个键，＃  所以有人找过肩将不能够使  所有的键转换

3。提供大写锁定退格键和Clear按钮  

由于所有的钥匙都在功能上除了从值类似，我们可以直接使用HTML和模板来创建密钥集的大部分。 

 <input type="button" value="a" id="btn1"/> 

这给我们一个按钮，但是，我们希望有更多。因此，我们添加以下事件。 

onmousedown - 将其更改为＃  

onmouseup - 恢复键值

的onclick - 点击写入的字符完成动作的密码箱   

例如:

string buttonHtmlString = "<input type=\"button\" class=\"keys\" value=\"{0}\" name =\"{1}\" id=\"btnVirKey\" οnclick=\"func_click(this.value);\" onmousedown = \"hashthekeys();\" οnmοuseοut=\"unhashthekeys();\" οnmοuseup=\"unhashthekeys();\" />";

另一个方面是，我们使用的是显示此一些明确的屏幕区域，因此，我们有一个固定的模式键方案。 

让其更像键盘

 /*      row1 - 15 char - alphabets
             *      row2 - 11 char - alphabets
             *      row3 - 10 char - numbers + 2 char symbols
             *      row4 - 15 char - symbols
             *      row5 - 15 char - symbols
             *      row6 - Back Space, Clear, Caps Lock
             */ 

因此  表的宽度为300px  每行15个字符

现已创建了3个列表，每个我所需要的不同的字符集。 

     List<string> listAlphabets = new List<string>();
        List<string> listNumbers = new List<string>();
        List<string> listSymbols = new List<string>(); 

分析差不多了 开始动手杀代码

C# code
private void CreateAlphabets()
        {
            for (int i =97; i <= 122; i++)
            {
                //a = 97; z=122
                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[] {"!","@","#","{1}quot;,"%","^","&","*","(",")","_","-","+","=","~","`",""",":",";","'",",",".","/","<",">","?","{","}","[","]","|","\\"};
            listSymbols.AddRange(symbollist);
        } 

最初将所有的键盘符号加入列表

第十五按钮之后加入一排，与模式，以适应。同样，与其他组数字，符号。

 //Filling first 2 rows -Alphabets            
            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)
                {
                    //adding the second row
                    htmltbl.Append("</td></tr><tr><td>");
                }
            } 

它的触发事件

javascript code

function func_click(charVal) {   
            finalresult = document.getElementById("txtoutput").value;
            document.getElementById("txtoutput").value = finalresult + charVal;
        } 

当名称产生相同的时候 我们设置重置事件

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;
                 }
        }