<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 -->
body {
  margin:25px;
  text-align:center;
  background:#000;
}


$primaryColor: #13AB9E;
$secondaryColor: #26ABDE;
$tertiaryColor: #202C2B;
$activeKeyColor: red;

h1 {
  color:$secondaryColor;
}

.virtual-keyboard {
  .row {
    text-align:center;
    margin:0 0 15px;
  }
  .row.spacebar {
    input {
      padding:10px 150px;
    }
  }
  input[type='button']{
    padding:10px 20px;
    border-radius:30px;
    border:3px solid $tertiaryColor;
    background:$primaryColor;
    color:#fff;
    text-transform:uppercase;
    &.shift-activated {
      background:$activeKeyColor;
    }
    &.delete, &.shift {
      text-transform:none;
    }
  }
}

.output {
  margin:15px;
  input {
    color:white;
    background:black;
    border:0px;
    line-height:2.2em;
    text-align:center;
    font-size:2em;
    width:100%;
    &:focus {
      outline:none;
      border:0px;
    }
  }
  ::-webkit-input-placeholder {
    color:white;
    text-align:center;
    font-size:1em;
  }
}
View Compiled
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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js