Onpage KeyBoard using javaScript

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'>&nbsp;.</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