Virtual Keyboard Playground

https://github.com/Mottie/Keyboard

by Rhys O'Connor

HTML

<link rel="stylesheet" href="http://mottie.github.com/Keyboard/css/keyboard.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://mottie.github.io/Keyboard/js/jquery.keyboard.js"></script>
<h2>
Designed and Developed by Rhys O'Connor, 2016
</h2>

<button type="button" class="btn btn-success" id="btn">
  Enter your email</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form class="form-horizontal">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">Contact Information</h4>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="test" class="col-sm-2 control-label">Email</label>
            <br />
            <div id="container">
              <textarea placeholder="click me!" style="font-size: 30px;" id="write" rows="2" cols="20"></textarea>
              <!-- text goes here -->

              <!-- these are the keys, it's a mess but it works -->
              <ul id="keyboard">
                <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
                <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
                <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
                <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
                <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
                <li class="symbol"><span...

CSS

* {
  margin: 0;
  padding: 0;
}

body {
  font: 71%/1.5 Verdana, Sans-Serif;
  background: #eee;
}

#container {
  margin: 5px auto;
  width: 688px;
}

#write {
  width: 471px;
  height: 50px;
  font: 1em/1.5 Verdana, Sans-Serif;
  background: #fff;
  border: 1px solid #f9f9f9;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

#keyboard {
  margin: 0;
  padding: 0;
  list-style: none;
}

#keyboard li {
  float: left;
  color: white;
  font-size: 10px;
  margin: 0 5px 5px 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #000;
  border: 1px solid #f9f9f9;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}

.capslock,
.tab,
.left-shift {
  clear: left;
}

#keyboard .tab,
#keyboard .delete {
  width: 35px;
}

#keyboard .capslock {
  width: 40px;
}

#keyboard .return {
  width: 39px;
}

#keyboard .left-shift {
  width: 48px;
}

#keyboard .right-shift {
  width: 55px;
}

.lastitem {
  margin-right: 0;
}

.uppercase {
  text-transform: uppercase;
}

#keyboard .space {
  clear: left;
  width: 341px;
}

.on {
  display: none;
}

#keyboard li:hover {
  position: relative;
  top: 1px;
  left: 1px;
  border-color: #e5e5e5;
  cursor: pointer;
}

JavaScript

$("#btn").on("click", function(e) {
   console.log('img clicked');
   $('#myModal').modal('toggle', $(this));
 });

 $(function() {
   var $write = $('#write'),
     shift = false,
     capslock = false;
     $('#keyboard').hide();
     
   $('#write').focus(function(){
			$('#keyboard').fadeIn(1000);
   })
   
   $('#keyboard').focus(function(){
      $('#keyboard').show();
   })
   
   $('#write').blur(function(){
       $('#keyboard').fadeOut(1000);
   })

   $('#keyboard li').click(function() {
     var $this = $(this),
       character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

     // Shift keys
     if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
       $('.letter').toggleClass('uppercase');
       $('.symbol span').toggle();

       shift = (shift === true) ? false : true;
       capslock = false;
       return false;
     }

     // Caps lock
     if ($this.hasClass('capslock')) {
       $('.letter').toggleClass('uppercase');
       capslock = true;
       return false;
     }

     // Delete
     if ($this.hasClass('delete')) {
       var html = $write.html();

       $write.html(html.substr(0, html.length - 1));
       return false;
     }

     // Special characters
     if ($this.hasClass('symbol')) character = $('span:visible', $this).html();
     if ($this.hasClass('space')) character = ' ';
     if ($this.hasClass('tab')) character = "\t";
     if ($this.hasClass('return')) character = "\n";

     // Uppercase letter
     if ($this.hasClass('uppercase')) character = character.toUpperCase();

     // Remove shift once a key is clicked.
     if (shift === true) {
       $('.symbol span').toggle();
       if (capslock === false) $('.letter').toggleClass('uppercase');

       shift = false;
     }

     // Add the character
     $write.html($write.html() + character);
   });
 });