In this article ,I have explained how to create
VirtualKeyBoard using JavaScript in Asp.Net.
Description:-
VirtualKeyBoard is basically used for security purpose in
web page. This is useful when you are login in secure page or some important
page or in paypal transaction page. In this
example I have design a keybaoard in which keyboard numbers are shuffled at every
page laod.
Open Visual studio -> create new website -> open Empty
website -> add a new page .
Default.aspx:-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
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];
}
}
function contain(array, num) {
for (var
i = 0; i < array.length; i++) {
if (array[i] == num) {
return
true;
}
}
return false;
}
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);
}
</script>
</head>
<body onload="Load()">
<form id="form1" runat="server">
<div>
<input id="tbInput"
type="text"
/>
</p>
<div id="virtualKeyboard">
<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>
</div>
</form>
</body>
</html>
Debuge the code.
OutPut:-
No comments:
Post a Comment
Note: only a member of this blog may post a comment.