Virtual keyboard for the numbers can be created by using
HTML buttons and a piece of javascript code. I have used 11 buttons including
backspace button and a textbox to display the text that have been entered. Please
find the below code for the reference.
ASPX
Page coding:
<html>
<head id="Head1" runat="server">
<title>Virtual Keyboard :fourthbottle</title>
<script type="text/javascript">
function input(e) {
var txtinput = document.getElementById("txtinput");
txtinput.value = txtinput.value + e.value;
}
function delet() {
var txtinput = document.getElementById("txtinput");
txtinput.value = txtinput.value.substr(0, txtinput.value.length - 1);
}
</script>
<style type="text/css">
.btn
{
background-color: Orange;
color: Black;
width: 20px;
height: 20px;
}
.btnbck
{
background-color: Red;
color: Black;
width: 44px;
height: 20px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="txtinput"
type="text"
style="width: 150px" />
<p />
<div id="VirtualKey">
<input id="b1" type="button"
value="1"
class="btn"
onclick="input(this);"
/>
<input id="b2" type="button"
value="2"
class="btn"
onclick="input(this);"
/>
<input id="b3" type="button"
value="3"
class="btn"
onclick="input(this);"
/>
<br />
<input id="b4" type="button"
value="4"
class="btn"
onclick="input(this);"
/>
<input id="b5" type="button"
value="5"
class="btn"
onclick="input(this);"
/>
<input id="b6" type="button"
value="6"
class="btn"
onclick="input(this);"
/>
<br />
<input id="b7" type="button"
value="7"
class="btn"
onclick="input(this);"
/>
<input id="b8" type="button"
value="8"
class="btn"
onclick="input(this);"
/>
<input id="b9" type="button"
value="9"
class="btn"
onclick="input(this);"
/>
<br />
<input id="b0" type="button"
value="0"
class="btn"
onclick="input(this)"
/>
<input id="bd" type="button"
class="btnbck"
value="
<<" onclick="delet();" />
</div>
</div>
</form>
</body>
</html>
