Skip to main content

Virtual Keyboard in HTML


















<!DOCTYPE html>
<html>
<head>
<title>VKB</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="assets/css/bootstrap-theme.min.css" type="text/css" />
<!-- Latest compiled and minified JavaScript -->
<script src="assets/js/jquery-3.1.0.min.js" type="text/javascript" ></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript" ></script>
<style type="text/css">
.btn-pawan
{
margin-bottom: 4px;
width: 32px;
height: 32px;
}
</style>
<script type="text/javascript">
//append text to password field by clicking all virtual key
function myfun(myvalue) 
        {
        var myvalue = myvalue;
        var current_text = document.getElementById("password").value;
        var new_var = current_text + myvalue;
        document.getElementById("password").value = new_var;
        }

         function clear_text()
        {
        document.getElementById("password").value = "";
        }

         function back_space() 
        {
        var current_text = document.getElementById("password").value;
new_var = current_text.substring(0, current_text.length - 1);
document.getElementById("password").value = new_var;
        }

 $(document).ready(function(){
//by default virtual keyboard hide
   $('#caps-off').hide();
   $('#caps-on').hide();
   //on checked caps-off id shown
   $("#keyboard").click(function(){

    if($('#keyboard').is(":checked"))
   {
    $("#caps-off").show();
   }   
   else
   {
    $("#caps-on").hide();
    $("#caps-off").hide();
   }
});
   //on checked caps-on id shown
   $("#caps-lock-on").click(function(){
       $("#caps-on").show();
       $("#caps-off").hide();
   });
   //on checked caps-off id shown
   $("#caps-lock-off").click(function(){
       $("#caps-off").show();
       $("#caps-on").hide();
   });
});
</script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:30px;border:1px solid #ddd;padding: 5px;">
<div class="well">Virtual Key Board</div>
<h2 align="center">LOGIN PAGE</h2>
<div class="col-md-4"></div>
<div class="col-md-4"><hr>
<div class="input-group">
 <span class="input-group-addon" id="sizing-addon2"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
 <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div><br>
<div class="input-group">
 <span class="input-group-addon" id="sizing-addon2"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
 <input type="text" id="password" class="form-control" placeholder="password" aria-describedby="sizing-addon2">
</div><br>
<button class="btn btn-block">LOGIN</button><br>
<div class="checkbox">
   <label>
     <input type="checkbox" name="keyboard" id="keyboard"> Enable Virtual Keyboard For Password
   </label>
 </div>
</div>
<div class="col-md-4">
<div style="border: 1px solid #ddd;padding:15px;" id="caps-off" background="red">
<!-- special characters -->
<button class="btn btn-sm btn-pawan" onclick="myfun('!')">!</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('@')">@</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('#')">#</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('$')">$</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('%')">%</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('^')">^</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('&')">&</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('*')">*</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('(')">(</button>
<button class="btn btn-sm btn-pawan" onclick="myfun(')')">)</button>

 <button class="btn btn-sm btn-pawan" onclick="myfun('<')"><</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('>')">></button>
<button class="btn btn-sm btn-pawan" onclick="myfun('?')">?</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('/')">/</button>
<button class="btn btn-sm btn-pawan" onclick="myfun(';')">;</button>
<button class="btn btn-sm btn-pawan" onclick="myfun(':')">:</button>
<!-- <button class="btn btn-sm btn-pawan" onclick="myfun('\"')">"</button> -->
<button class="btn btn-sm btn-pawan" onclick="myfun('[')">[</button>
<button class="btn btn-sm btn-pawan" onclick="myfun(']')">]</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('{')">{</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('}')">}</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('+')">+</button>
<!-- numbers -->
<button class="btn btn-sm btn-pawan" onclick="myfun('1')">1</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('2')">2</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('3')">3</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('4')">4</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('5')">5</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('6')">6</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('7')">7</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('8')">8</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('9')">9</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('0')">0</button>
<!-- alphabets -->
<button class="btn btn-sm btn-pawan" onclick="myfun('q')">q</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('w')">w</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('e')">e</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('r')">r</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('t')">t</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('y')">y</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('u')">u</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('i')">i</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('o')">o</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('p')">p</button>
<!-- alphabets -->
<button class="btn btn-sm btn-pawan" onclick="myfun('a')">a</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('s')">s</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('d')">d</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('f')">f</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('g')">g</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('h')">h</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('j')">j</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('k')">k</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('l')">l</button>
<!-- alphabets -->
<button class="btn btn-sm btn-pawan" onclick="myfun('z')">z</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('x')">x</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('c')">c</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('v')">v</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('b')">b</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('n')">n</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('m')">m</button>

<button class="btn btn-sm" onclick="back_space()">Back </button>
<button class="btn btn-sm" style="margin-left:4px;" id="caps-lock-on">Caps Lock</button>
<button class="btn btn-sm" style="margin-left:4px;" onclick="clear_text()">Clear</button>
</div>
<div style="border: 1px solid #ddd;padding:15px;" id="caps-on">
<!-- special characters -->
<button class="btn btn-sm btn-pawan" onclick="myfun('!')">!</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('@')">@</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('#')">#</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('$')">$</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('%')">%</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('^')">^</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('&')">&</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('*')">*</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('(')">(</button>
<button class="btn btn-sm btn-pawan" onclick="myfun(')')">)</button>

 <button class="btn btn-sm btn-pawan" onclick="myfun('<')"><</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('>')">></button>
<button class="btn btn-sm btn-pawan" onclick="myfun('?')">?</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('/')">/</button>
<button class="btn btn-sm btn-pawan" onclick="myfun(';')">;</button>
<button class="btn btn-sm btn-pawan" onclick="myfun(':')">:</button>
<!-- <button class="btn btn-sm btn-pawan" onclick="myfun('\"')">"</button> -->
<button class="btn btn-sm btn-pawan" onclick="myfun('[')">[</button>
<button class="btn btn-sm btn-pawan" onclick="myfun(']')">]</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('{')">{</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('}')">}</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('+')">+</button>
<!-- numbers -->
<button class="btn btn-sm btn-pawan" onclick="myfun('1')">1</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('2')">2</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('3')">3</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('4')">4</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('5')">5</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('6')">6</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('7')">7</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('8')">8</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('9')">9</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('0')">0</button>
<!-- alphabets -->
<button class="btn btn-sm btn-pawan" onclick="myfun('Q')">Q</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('W')">W</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('E')">E</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('R')">R</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('T')">T</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('Y')">Y</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('U')">U</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('I')">I</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('O')">O</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('P')">P</button>
<!-- alphabets -->
<button class="btn btn-sm btn-pawan" onclick="myfun('A')">A</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('S')">S</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('D')">D</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('F')">F</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('G')">G</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('H')">H</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('J')">J</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('K')">K</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('L')">L</button>
<!-- alphabets -->
<button class="btn btn-sm btn-pawan" onclick="myfun('Z')">Z</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('X')">X</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('C')">C</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('V')">V</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('B')">B</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('N')">N</button>
<button class="btn btn-sm btn-pawan" onclick="myfun('M')">M</button>

<button class="btn btn-sm" onclick="back_space()">Back </button>
<button class="btn btn-sm" style="margin-left:4px;" id="caps-lock-off">Caps Lock</button>
<button class="btn btn-sm" style="margin-left:4px;" onclick="clear_text()">Clear</button>
</div>
</div>
</div>
</div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

transparent css

body {   font-family: 'Open Sans', sans-serif;   font-size: 14px;   line-height: 45px;   /*color: #666;*/   color: black;   background-color: #fff; } :hover {   text-decoration: none;   outline: none } .form-control {   background-color: transparent;   border-color: black;   height: 50px;   border-radius: 0;   box-shadow: none; } textarea.form-control {   min-height: 180px;   resize:none; } .form-group {   margin-bottom: 30px; } .contact-info {   padding-left:70px;   font-weight: 300; } ul.address {   margin-top: 30px;   list-style: none;   padding: 0;   margin: 0; } .btn-submit {   display: block;   padding: 12px;   width: 100%;   background:transparent;   color: #4985C6;   border:1px solid black;   margin-top: 40px; } .btn-submit:hover {   display: block;   padding: 12px; ...
Post a Comment
Read more

Get Current Location & Address in PHP

index.php ____________________________________________________________________ <!DOCTYPE html> <head> <title>GEt Current Location</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> jQuery(function($){ var lat = $('#lat'); var lng = $('#lng'); $('#submit').click(function(){ jQuery.ajax({ url: 'get_address.php', type: 'post', data: 'lat=' + lat.val() + '&lng='+lng.val(), success: function(results){ $("#ack").val(results) } }); }); }); </script> <script> if(!navigator.geolocation){ alert('Your Browser does not support HTML5 Geo Location. Please Use Newer Version Browsers'); } navigator.geolocation.getCurrentPosition(success, error); function success(position){ var latit...
Post a Comment
Read more

Page loader

<html> <head> <style> .no-js #loader { display: none;  } .js #loader { display: block; position: absolute; left: 100px; top: 0; } .preload { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url(load.gif) center no-repeat #fff; } </style> </head> <body> <div class="preload"></div> <script src="js/jquery.min.js"></script> <script type="text/javascript"> //paste this code under head tag or in a seperate js file. // Wait for window load $(window).load(function() { // Animate loader off screen $(". preload ").fadeOut("slow");; }); </script> </body> </html>
Post a Comment
Read more