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>
  
  <button type="button" class="btn btn-success" id="btn" >btn</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>
            <div class="col-sm-6">
              <input type="email" class="form-control" id="test" placeholder="test" autocomplete="off">
            </div>
        </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-success" id="save" >Send</button>
  </div>

JavaScript

$("#btn").on("click",function(e){ console.log('img clicked');
   $('#myModal').modal('toggle', $(this));
 });
 
 $('#test').keyboard({ layout: 'qwerty', usePreview: false,position: {
        // null = attach to input/textarea;
        // use $(sel) to attach elsewhere
        of: $('#teste'),
        my: 'center top',
        at: 'center top',
        // used when "usePreview" is false
        at2: 'center bottom'
      } });