September 17, 2024
Hot News

jQuery Virtual Keyboard – iamrohit.in

admin017 mins

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.

="keyboard" id="keyboard1">
  
="row-1">
    
="key w2">
="first-ch">~
>
="second-ch">`
>
>
    
="key w2">
="first-ch">!
>
="second-ch">1
>
>
    
="key w2">
="first-ch">@
>
="second-ch">2
>
>
    
="key w2">
="first-ch">#
>
="second-ch">3
>
>
    
="key w2">
="first-ch">$
>
="second-ch">4
>
>
    
="key w2">
="first-ch">%
>
="second-ch">5
>
>
    
="key w2">
="first-ch">^
>
="second-ch">6
>
>
    
="key w2">
="first-ch">&amp;
>
="second-ch">7
>
>
    
="key w2">
="first-ch">*
>
="second-ch">8
>
>
    
="key w2">
="first-ch">(
>
="second-ch">9
>
>
    
="key w2">
="first-ch">)
>
="second-ch">0
>
>
    
="key w2">
="first-ch">_
>
="second-ch">-
>
>
    
="key w2">
="first-ch">+
>
="second-ch">=
>
>
    
="key w4">Backspace
>
  
>
  
="row-2">
    
="key w3">Tab
>
    
="key w2" id="Q">q
>
    
="key w2">w
>
    
="key w2">e
>
    
="key w2">r
>
    
="key w2">t
>
    
="key w2">y
>
    
="key w2">u
>
    
="key w2">i
>
    
="key w2">o
>
    
="key w2">p
>
    
="key w2">
="first-ch">{
>
="second-ch">[
>
>
    
="key w2">
="first-ch">}
>
="second-ch">]
>
>
    
="key w3">
="first-ch">|
>
="second-ch">\
>
>
  
>
  
="row-3">
    
="key w4">Caps Lock
>
    
="key w2">a
>
    
="key w2">s
>
    
="key w2">d
>
    
="key w2">f
>
    
="key w2">g
>
    
="key w2">h
>
    
="key w2">j
>
    
="key w2">k
>
    
="key w2">l
>
    
="key w2">
="first-ch">:
>
="second-ch">&#59;
>
>
    
="key w2">
="first-ch">"
second-ch">'

    
key w4">Enter

  

  
row-4">
    
key w5">Shift

    
key w2">z

    
key w2">x

    
key w2">c

    
key w2">v

    
key w2">b

    
key w2">n

    
key w2">m

    
key w2">
first-ch"><
second-ch">,

    
key w2">
first-ch">>
second-ch">.

      
key w2">
first-ch">?
second-ch">/

    
key w5">Shift

  

  
row-5">
    
key w3">Ctrl

    
key w2">Win

    
key w3">Alt

    
key w12"> 

    
key w3">Alt

    
key w2">Win

    
key w2">Spl

    
key w3">Ctrl

Backspace

Tab

q

w

e

r

t

y

u

i

o

p

Caps Lock

a

s

d

f

g

h

j

k

l

Enter

Shift

z

x

c

v

b

n

m

Shift

Ctrl

Win

Alt

Alt

Win

Spl

Ctrl

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

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) == "
) {
      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 = "
";
      $("#output").html($("#output").html() + content);
    }
    else if (content == "Tab") {
      content = "     ";
      $("#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("     ", "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 + "
" + secondHalf);
    }
  });
};
 
$(document).ready(function() {
  init();
});

“) {
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 = “
“;
$(“#output”).html($(“#output”).html() + content);
}
else if (content == “Tab”) {
content = ”     “;
$(“#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(”     “, “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 + “
” + secondHalf);
}
});
};
$(document).ready(function() {
init();
});

See live demo and download source code.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related News

Top