jQuery Virtual Keyboard

In this post i am going to share simple jquery and css based code snippet to create virtual keyboard. You can add virtual keyboard feature on your website with extra security as you have seen this type of feature on more secure website where you can also use online virtual keyboard feature.
jQuery Virtual Keyboard

Libraries

You only have to add jquery core library on page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

HTML

Now create your virtual keyboard with all the required keys which you can use to type any text virtually without physical access of your keyboard.

<section class="keyboard" id="keyboard1">
  <section class="row-1">
    <div class="key w2"><div class="first-ch">~</div><div class="second-ch">`</div></div>
    <div class="key w2"><div class="first-ch">!</div><div class="second-ch">1</div></div>
    <div class="key w2"><div class="first-ch">@</div><div class="second-ch">2</div></div>
    <div class="key w2"><div class="first-ch">#</div><div class="second-ch">3</div></div>
    <div class="key w2"><div class="first-ch">$</div><div class="second-ch">4</div></div>
    <div class="key w2"><div class="first-ch">%</div><div class="second-ch">5</div></div>
    <div class="key w2"><div class="first-ch">^</div><div class="second-ch">6</div></div>
    <div class="key w2"><div class="first-ch">&amp;</div><div class="second-ch">7</div></div>
    <div class="key w2"><div class="first-ch">*</div><div class="second-ch">8</div></div>
    <div class="key w2"><div class="first-ch">(</div><div class="second-ch">9</div></div>
    <div class="key w2"><div class="first-ch">)</div><div class="second-ch">0</div></div>
    <div class="key w2"><div class="first-ch">_</div><div class="second-ch">-</div></div>
    <div class="key w2"><div class="first-ch">+</div><div class="second-ch">=</div></div>
    <div class="key w4">Backspace</div>
  </section>
  <section class="row-2">
    <div class="key w3">Tab</div>
    <div class="key w2" id="Q">q</div>
    <div class="key w2">w</div>
    <div class="key w2">e</div>
    <div class="key w2">r</div>
    <div class="key w2">t</div>
    <div class="key w2">y</div>
    <div class="key w2">u</div>
    <div class="key w2">i</div>
    <div class="key w2">o</div>
    <div class="key w2">p</div>
    <div class="key w2"><div class="first-ch">{</div><div class="second-ch">[</div></div>
    <div class="key w2"><div class="first-ch">}</div><div class="second-ch">]</div></div>
    <div class="key w3"><div class="first-ch">|</div><div class="second-ch">\</div></div>
  </section>
  <section class="row-3">
    <div class="key w4">Caps Lock</div>
    <div class="key w2">a</div>
    <div class="key w2">s</div>
    <div class="key w2">d</div>
    <div class="key w2">f</div>
    <div class="key w2">g</div>
    <div class="key w2">h</div>
    <div class="key w2">j</div>
    <div class="key w2">k</div>
    <div class="key w2">l</div>
    <div class="key w2"><div class="first-ch">:</div><div class="second-ch">&#59;</div></div>
    <div class="key w2"><div class="first-ch">"</div><div class="second-ch">'</div></div>
    <div class="key w4">Enter</div>
  </section>
  <section class="row-4">
    <div class="key w5">Shift</div>
    <div class="key w2">z</div>
    <div class="key w2">x</div>
    <div class="key w2">c</div>
    <div class="key w2">v</div>
    <div class="key w2">b</div>
    <div class="key w2">n</div>
    <div class="key w2">m</div>
    <div class="key w2"><div class="first-ch">&lt;</div><div class="second-ch">,</div></div>
    <div class="key w2"><div class="first-ch">&gt;</div><div class="second-ch">.</div></div>
      <div class="key w2"><div class="first-ch">?</div><div class="second-ch">/</div></div>
    <div class="key w5">Shift</div>
  </section>
  <section class="row-5">
    <div class="key w3">Ctrl</div>
    <div class="key w2">Win</div>
    <div class="key w3">Alt</div>
    <div class="key w12"> </div>
    <div class="key w3">Alt</div>
    <div class="key w2">Win</div>
    <div class="key w2">Spl</div>
    <div class="key w3">Ctrl</div>
  </section>
</section>

Create output screen where display all the typed input’s as output.

<div class="monitor">
  <div class="screen">
    <p id="output"></p>
  </div>
</div>


CSS

Now time to styling your virtual keyboard with some awesome stylesheet which make your virtual keyboard look alike physical keyboard so that you feel like you are typing on real keyboard.

.keyboard {
  background: #999;
  border-radius: 4px;
  color: #555;
  float: left;
  font: bold 16px Helvetica, Arial;
  margin: 10px 15px 25px 0;
  padding: 8px;
  position: relative;
  -moz-user-select: none;
  -webkit-user-select: none;
  width: 875px;
}
 
.key {
  background: -moz-linear-gradient(left, #CCC 0%, #D8D8D8 20px, #E5E5E5 35px, #FAFAFA 100%);
  background: -webkit-linear-gradient(left, #CCC 0%, #D8D8D8 20px, #E5E5E5 35px, #FAFAFA 100%);
  border: 6px solid transparent;
  border-width: 5px 5px 8px 6px;
  border-image: -moz-linear-gradient(top, #999 0%, #BBB 45%, #BBB 55%, #CCC 95%, #DDD 100%) 49%;
  border-image: -webkit-linear-gradient(top, #999 0%, #BBB 45%, #BBB 55%, #CCC 95%, #DDD 100%) 49%;
  box-shadow: 3px -5px 6px rgba(100, 100, 100, 0.6), -4px -4px 6px rgba(100, 100, 100, 0.4), 4px -2px 5px rgba(100, 100, 100, 0.5);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  height: 60px;
  margin: 1px 0;
  padding: 2px 0 0 5px;
  position: relative;
  vertical-align: top;
}
 
.key:active {
  background: -moz-linear-gradient(left, #C8C8C8 0%, #D8D8D8 20px, #E5E5E5 35px, #FAFAFA 100%);
  background: -webkit-linear-gradient(left, #C8C8C8 0%, #D8D8D8 20px, #E5E5E5 35px, #FAFAFA 100%);
  box-shadow: 1px -3px 6px rgba(100, 100, 100, 0.6), -3px -3px 6px rgba(100, 100, 100, 0.3), 4px -2px 6px rgba(100, 100, 100, 0.3);
  top: 1px;
}
 
.w2 {
  text-transform: uppercase;
  width: 54px;
}
 
.w3 {
  width: 83px;
}
 
.w4 {
  width: 112px;
}
 
.w5 {
  width: 141px;
}
 
.w12 {
  width: 344px;
}
 
.monitor {
  float: left;
  margin: 10px 10px 100px;
  position: relative;
}
 
.screen {
  border: 25px solid #444;
  border-radius: 10px;
  height: 300px;
  overflow: auto;
  padding: 5px;
  width: 405px;
}
 
.monitor:after, .monitor:before {
  content: "";
  left: 50%;
  position: absolute;
}
 
.monitor:after {
  background: #3A3A3A;
  height: 60px;
  margin-left: -20px;
  width: 40px;
}
 
.monitor:before {
  background: #333;
  border-top-left-radius: 150px 25px;
  border-top-right-radius: 150px 25px;
  border-bottom-left-radius: 150px 25px;
  border-bottom-right-radius: 150px 25px;
  bottom: -80px;
  height: 40px;
  margin-left: -25%;
  width: 50%;
}
 
.screen p {
  display: inline-block;
  font-family: Courier, monospace;
  margin: 0;
  padding: 0;
}
 
.screen p:after {
  content: "|";
  position: relative;
  right: 3px;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: blinker;
  -moz-animation-duration: 1.5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
}
 
@-webkit-keyframe blinker {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
 
@-moz-keyframe blinker {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}


JS

Finally make your virtual keyboard actionable by add following methods.

var init = function() {  
  var shift = false;
  var caps = false;
 
  $(".key").mousedown(function() {
    // Setting the content to grab
    var content = $(this).html();
    var outputContent = $("#output").html();
 
    if (content.substr(0,4) == "<div") {
      if (shift) {
        var subDiv = $(this).find(".first-ch");
      }
      else {
        var subDiv = $(this).find(".second-ch");
      }
      content = subDiv.html();
    }
 
    // Setting special output, and then outputting
    if (content == "Backspace") {
      var stuff = outputContent;
      var x = stuff.length - 1;
 
      if (stuff.charAt(x) == ">") {
        var tagStart = stuff.lastIndexOf("<");
        $("#output").html(stuff.substr(0, tagStart));
      }
      else if (stuff.charAt(x) == ";") {
        var charStart = stuff.lastIndexOf("&");
        $("#output").html(stuff.substr(0, charStart));
      }
      else {
        $("#output").html(stuff.substr(0, x));
      }
    }
    else if (content == "Enter") {
      content = "<br />";
      $("#output").html($("#output").html() + content);
    }
    else if (content == "Tab") {
      content = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
      $("#output").html($("#output").html() + content);
    }
    else if (content == "Shift") {
      if (shift) {
        shift = false;
      }
      else {
        shift = true;
      }
    }
    else if (content == "Caps Lock") {
      if (caps) {
        caps = false;
      }
      else {
        caps = true;
      }
    }
    else if (content == "Ctrl" || content == "Alt" || content == "Win" || content == "Spl") {
 
    }
    else { // i.e. a letter
      capitalize = false;
 
      if (shift) {
        capitalize = !capitalize;
        shift = false;
      }
 
      if (caps) {
        capitalize = !capitalize;
      }
 
      if ((content.length == 1) && capitalize) {
        content = content.toUpperCase()
      }
 
      $("#output").html($("#output").html() + content);
    }
 
    outputContent = $("#output").html();
 
    // creating the automatic line break
    var sinceLastTag, relevantString, start, end, snippet;
    sinceLastTag = outputContent.lastIndexOf(">");
    relevantString = outputContent.substring(sinceLastTag).replace("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;", "1111");
    var relevantLength = relevantString.length;
 
    if (relevantLength > 1) {
        start = relevantString.indexOf("&");
        end = relevantString.indexOf(";") + 1;
        snippet = relevantString.substring(start, end);
        relevantString = relevantString.replace(snippet, "1");
    }
 
    if (relevantLength % 41 === 0 && relevantLength > 0) {
      var sweetSpot = outputContent.lastIndexOf(" ");
      var firstHalf = outputContent.substring(0, sweetSpot);
      var secondHalf = outputContent.substring(sweetSpot);
 
      $("#output").html(firstHalf + "<br />" + secondHalf);
    }
  });
};
 
$(document).ready(function() {
  init();
});

See live demo and download source code.

DEMO

This awesome script developed by ethanbustad, Visit their official codepen repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.