Table of Contents

Virtual Keyboard Javascript | Virtual Keyboard Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Virtual Keyboard Javascript. We use HTML, Css, and javascript for Virtual Keyboard Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Virtual Keyboard Javascript.

HTML Code

 <div class="output">  
  <input type="text" name="output" id="output" placeholder="Virtual Keyboard">  
 </div>  
 <div class="virtual-keyboard">  
  <div class="row">  
   <input type="button" value="1">  
   <input type="button" value="2">  
   <input type="button" value="3">  
   <input type="button" value="4">  
   <input type="button" value="5">  
   <input type="button" value="6">  
   <input type="button" value="7">  
   <input type="button" value="8">  
   <input type="button" value="9">  
   <input type="button" value="0">  
   <input type="button" value="delete" class="delete">  
  </div>  
  <div class="row">  
   <input type="button" value="q">  
   <input type="button" value="w">  
   <input type="button" value="e">  
   <input type="button" value="r">  
   <input type="button" value="t">  
   <input type="button" value="y">  
   <input type="button" value="u">  
   <input type="button" value="i">  
   <input type="button" value="o">  
   <input type="button" value="p">  
  </div>  
  <div class="row">  
   <input type="button" value="a">  
   <input type="button" value="s">  
   <input type="button" value="d">  
   <input type="button" value="f">  
   <input type="button" value="g">  
   <input type="button" value="h">  
   <input type="button" value="j">  
   <input type="button" value="k">  
   <input type="button" value="l">  
  </div>  
  <div class="row">  
   <input type="button" value="z">  
   <input type="button" value="x">  
   <input type="button" value="c">  
   <input type="button" value="v">  
   <input type="button" value="b">  
   <input type="button" value="n">  
   <input type="button" value="m">  
   <input type="button" value="shift" class="shift">  
  </div>  
  <div class="row spacebar">  
   <input type="button" value=" ">  
  </div>  
 </div><!--// virtual-keyboard -->

There is all the HTML code for the Virtual Keyboard Javascript. Now, you can see an output with Virtual Keyboard Javascript then we write javascript for Virtual Keyboard Javascript.

output

CSS code

 body {  
       margin: 25px;  
       text-align: center;  
       background: #000;  
 }  
  h1 {  
       color: #26abde;  
 }  
  .virtual-keyboard .row {  
       text-align: center;  
       margin: 0 0 15px;  
 }  
  .virtual-keyboard .row.spacebar input {  
       padding: 10px 150px;  
 }  
  .virtual-keyboard input[type='button'] {  
       padding: 10px 20px;  
       border-radius: 30px;  
       border: 3px solid #202c2b;  
       background: #13ab9e;  
       color: #fff;  
       text-transform: uppercase;  
 }  
  .virtual-keyboard input[type='button'].shift-activated {  
       background: red;  
 }  
  .virtual-keyboard input[type='button'].delete, .virtual-keyboard input[type='button'].shift {  
       text-transform: none;  
 }  
  .output {  
       margin: 15px;  
 }  
  .output input {  
       color: white;  
       background: black;  
       border: 0px;  
       line-height: 2.2em;  
       text-align: center;  
       font-size: 2em;  
       width: 100%;  
 }  
  .output input:focus {  
       outline: none;  
       border: 0px;  
 }  
  .output ::-webkit-input-placeholder {  
       color: white;  
       text-align: center;  
       font-size: 1em;  
 }

Css Updated output

Javascript (jquery)code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

var $keyboardWrapper = $('.virtual-keyboard'),  
   $key = $keyboardWrapper.find("input"),  
   $key_delete = $('.delete'),  
   $key_shift = $('.shift'),  
   $outputField = $('.output input'),  
   $currentValue = $outputField.val(),  
   actionKeys = $(".delete,.shift")  
   activeShiftClass = "shift-activated";  
 // handle keystrokes  
 function _keystroke(keyCase){  
  $key.not(actionKeys).on('click',function(e){  
   e.preventDefault();  
   // check for shift key for upper  
   if($key_shift.hasClass(activeShiftClass)){  
    keyCase = 'upper';  
    $key_shift.removeClass(activeShiftClass);  
   }else{  
    keyCase = 'lower';  
   }  
   // handle case  
   if(keyCase == 'upper'){  
    var keyValue = $(this).val().toUpperCase();  
   }else{  
    var keyValue = $(this).val().toLowerCase();  
   }  
   // grab current value  
   var output = $('.output input').val();  
     $outputField.val(output + keyValue);  
     getCurrentVal();  
     focusOutputField();  
  });  
 } // keystroke  
 // delete  
 $key_delete.on('click',function(e){  
  e.preventDefault();  
  $outputField.val($currentValue.substr(0,$currentValue.length - 1));  
  getCurrentVal();  
  focusOutputField();  
 });  
 // shift  
 $key_shift.on('click',function(e){  
  e.preventDefault();  
  $(this).toggleClass(activeShiftClass);  
 });  
 // grab current value of typed text  
 function getCurrentVal(){  
  $currentValue = $outputField.val();  
 }  
 // focus for cursor hack  
 function focusOutputField(){  
  $outputField.focus();  
 }  
 _keystroke("lower"); // init keystrokes

Final output

Now that we have completed our javascript section, Here is our updated output with javascript. Hope you like theVirtual Keyboard Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Virtual Keyboard Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.