Hello I have created A keyBoard using javascript .
Here is the code ...
<!DOCTYPE html>
<html>
<head>
<title>On Desktop KeyBoard ::</title>
<script type="text/javascript" src='jquery.min.js'></script>
<script type="text/javascript" src='yedu.js'></script>
</head>
<body>
<div>
<input onclick="clicked(this)" auto-complete="off">
<input onclick="clicked(this)" auto-complete="off">
<input onclick="clicked(this)" auto-complete="off">
</div>
<table id='KeyBoard'>
<tr>
<td><button id='one'>1</button></td>
<td><button id='two'>2</button></td>
<td><button id='three'>3</button></td>
</tr>
<tr>
<td><button id='four'>4</button></td>
<td><button id='five'>5</button></td>
<td><button id='six'>6</button></td>
</tr>
<tr>
<td><button id='seven'>7</button></td>
<td><button id='eight'>8</button></td>
<td><button id='nine'>9</button></td>
<td><button id='ok'>OK</button></td>
</tr>
<tr>
<td><button id='zero'>0</button></td>
<td><button id='dot'> .</button></td>
<td><button id='backspace'> <-</button></td>
</tr>
</table>
</body>
</html>
yedu.js file
var pressed;
$(document).ready(function()
{
$("#KeyBoard").hide();
$("#ok").click(replace);
$("#one").click(function(){
$(pressed).val($(pressed).val()+"1");
});
$("#two").click(function(){
$(pressed).val($(pressed).val()+"2");
});
$("#three").click(function(){
$(pressed).val($(pressed).val()+"3");
});
$("#four").click(function(){
$(pressed).val($(pressed).val()+"4");
});
$("#five").click(function(){
$(pressed).val($(pressed).val()+"5");
});
$("#six").click(function(){
$(pressed).val($(pressed).val()+"6");
});
$("#seven").click(function(){
$(pressed).val($(pressed).val()+"7");
});
$("#eight").click(function(){
$(pressed).val($(pressed).val()+"8");
});
$("#nine").click(function(){
$(pressed).val($(pressed).val()+"9");
});
$("#zero").click(function(){
$(pressed).val($(pressed).val()+"0");
});
$("#dot").click(function(){
var l=$(pressed).val();
if (l[l.length-1]==".") {
alert("Dot is already existed !");
}
else
$(pressed).val($(pressed).val()+".");
});
$("#backspace").click(function(){
$(pressed).val($(pressed).val().slice(0,$(pressed).val().length-1));
});
$("#clear").click(function(){
$(pressed).val();
});
});
function clicked(a)
{
$("#KeyBoard").show();
pressed=a;
}
function replace()
{
$("#KeyBoard").hide();
}
thank You...
Here is the code ...
<!DOCTYPE html>
<html>
<head>
<title>On Desktop KeyBoard ::</title>
<script type="text/javascript" src='jquery.min.js'></script>
<script type="text/javascript" src='yedu.js'></script>
</head>
<body>
<div>
<input onclick="clicked(this)" auto-complete="off">
<input onclick="clicked(this)" auto-complete="off">
<input onclick="clicked(this)" auto-complete="off">
</div>
<table id='KeyBoard'>
<tr>
<td><button id='one'>1</button></td>
<td><button id='two'>2</button></td>
<td><button id='three'>3</button></td>
</tr>
<tr>
<td><button id='four'>4</button></td>
<td><button id='five'>5</button></td>
<td><button id='six'>6</button></td>
</tr>
<tr>
<td><button id='seven'>7</button></td>
<td><button id='eight'>8</button></td>
<td><button id='nine'>9</button></td>
<td><button id='ok'>OK</button></td>
</tr>
<tr>
<td><button id='zero'>0</button></td>
<td><button id='dot'> .</button></td>
<td><button id='backspace'> <-</button></td>
</tr>
</table>
</body>
</html>
yedu.js file
var pressed;
$(document).ready(function()
{
$("#KeyBoard").hide();
$("#ok").click(replace);
$("#one").click(function(){
$(pressed).val($(pressed).val()+"1");
});
$("#two").click(function(){
$(pressed).val($(pressed).val()+"2");
});
$("#three").click(function(){
$(pressed).val($(pressed).val()+"3");
});
$("#four").click(function(){
$(pressed).val($(pressed).val()+"4");
});
$("#five").click(function(){
$(pressed).val($(pressed).val()+"5");
});
$("#six").click(function(){
$(pressed).val($(pressed).val()+"6");
});
$("#seven").click(function(){
$(pressed).val($(pressed).val()+"7");
});
$("#eight").click(function(){
$(pressed).val($(pressed).val()+"8");
});
$("#nine").click(function(){
$(pressed).val($(pressed).val()+"9");
});
$("#zero").click(function(){
$(pressed).val($(pressed).val()+"0");
});
$("#dot").click(function(){
var l=$(pressed).val();
if (l[l.length-1]==".") {
alert("Dot is already existed !");
}
else
$(pressed).val($(pressed).val()+".");
});
$("#backspace").click(function(){
$(pressed).val($(pressed).val().slice(0,$(pressed).val().length-1));
});
$("#clear").click(function(){
$(pressed).val();
});
});
function clicked(a)
{
$("#KeyBoard").show();
pressed=a;
}
function replace()
{
$("#KeyBoard").hide();
}
thank You...
Comments
Post a Comment