<div class="container">
	<h2>Virtual Keyboard </h2>
	<p>for show keyboard activity, Suitable for vlogger tutorial</p>
</div>

<div id="terminal" contenteditable="true" spellcheck="false" data-placeholder="Typing here..."></div>

<p>
	<label><input checked class="change-size" type="radio" name="size" value="6"/> x-small</label>
	<label><input class="change-size" type="radio" name="size" value="8"/> small</label>
	<label><input class="change-size" type="radio" name="size" value="12"/> medium</label>
	<label><input class="change-size" type="radio" name="size" value="16"/> large</label>
</p>

<div class="keyboard-container">
	<div class="keyboard">
		<div class="key-row">
			<kbd class="key key-s" data-key="27">Esc</kbd>
			<kbd class="key key-break-1">&nbsp;</kbd>
			<kbd class="key key-s" data-key="112">F1</kbd>
			<kbd class="key key-s" data-key="113">F2</kbd>
			<kbd class="key key-s" data-key="114">F3</kbd>
			<kbd class="key key-s" data-key="115">F4</kbd>
			<kbd class="key key-break-2">&nbsp;</kbd>
			<kbd class="key key-s" data-key="116">F5</kbd>
			<kbd class="key key-s" data-key="117">F6</kbd>
			<kbd class="key key-s" data-key="118">F7</kbd>
			<kbd class="key key-s" data-key="119">F8</kbd>
			<kbd class="key key-break-2">&nbsp;</kbd>
			<kbd class="key key-s" data-key="120">F9</kbd>
			<kbd class="key key-s" data-key="121">F10</kbd>
			<kbd class="key key-s" data-key="122">F11</kbd>
			<kbd class="key key-s" data-key="123">F12</kbd>
		</div>
	
		<div class="key-row">
			<kbd class="key" data-key="192"><span class="top-key">~</span><span class="bottom-key">`</span></kbd>
			<kbd class="key" data-key="49"><span class="top-key">!</span><span class="bottom-key">1</span></kbd>
			<kbd class="key" data-key="50"><span class="top-key">@</span><span class="bottom-key">2</span></kbd>
			<kbd class="key" data-key="51"><span class="top-key">#</span><span class="bottom-key">3</span></kbd>
			<kbd class="key" data-key="52"><span class="top-key">$</span><span class="bottom-key">4</span></kbd>
			<kbd class="key" data-key="53"><span class="top-key">%</span><span class="bottom-key">5</span></kbd>
			<kbd class="key" data-key="54"><span class="top-key">^</span><span class="bottom-key">6</span></kbd>
			<kbd class="key" data-key="55"><span class="top-key">&amp;</span><span class="bottom-key">7</span></kbd>
			<kbd class="key" data-key="56"><span class="top-key">*</span><span class="bottom-key">8</span></kbd>
			<kbd class="key" data-key="57"><span class="top-key">(</span><span class="bottom-key">9</span></kbd>
			<kbd class="key" data-key="48"><span class="top-key">)</span><span class="bottom-key">0</span></kbd>
			<kbd class="key" data-key="189"><span class="top-key">_</span><span class="bottom-key">-</span></kbd>
			<kbd class="key" data-key="187"><span class="top-key">+</span><span class="bottom-key">=</span></kbd>
			<kbd class="key key-backspace" data-key="8">Backspace</kbd>
		</div>
	
		<div class="key-row">
			<kbd class="key key-tab" data-key="9">Tab</kbd>
			<kbd class="key" data-key="81">Q</kbd>
			<kbd class="key" data-key="87">W</kbd>
			<kbd class="key" data-key="69">E</kbd>
			<kbd class="key" data-key="82">R</kbd>
			<kbd class="key" data-key="84">T</kbd>
			<kbd class="key" data-key="89">Y</kbd>
			<kbd class="key" data-key="85">U</kbd>
			<kbd class="key" data-key="73">I</kbd>
			<kbd class="key" data-key="79">O</kbd>
			<kbd class="key" data-key="80">P</kbd>
			<kbd class="key" data-key="219"><span class="top-key">{</span><span class="bottom-key">[</span></kbd>
			<kbd class="key" data-key="221"><span class="top-key">}</span><span class="bottom-key">]</span></kbd>
		</div>
		
		<div class="key-row">
			<kbd class="key key-capslock" data-key="20">CapsLock</kbd>
			<kbd class="key" data-key="65">A</kbd>
			<kbd class="key" data-key="83">S</kbd>
			<kbd class="key" data-key="68">D</kbd>
			<kbd class="key" data-key="70">F</kbd>
			<kbd class="key" data-key="71">G</kbd>
			<kbd class="key" data-key="72">H</kbd>
			<kbd class="key" data-key="74">J</kbd>
			<kbd class="key" data-key="75">K</kbd>
			<kbd class="key" data-key="76">L</kbd>
			<kbd class="key" data-key="186"><span class="top-key">:</span><span class="bottom-key">;</span></kbd>
			<kbd class="key" data-key="222"><span class="top-key">"</span><span class="bottom-key">'</span></kbd>
			<kbd class="key" data-key="220"><span class="top-key">|</span><span class="bottom-key">\</span></kbd>
			<kbd class="key key-enter" data-key="13"><span>Enter</span></kbd>
		</div>
	
		<div class="key-row">
			<kbd class="key key-shift" data-key="16">Shift</kbd>
			<kbd class="key" data-key="90">Z</kbd>
			<kbd class="key" data-key="88">X</kbd>
			<kbd class="key" data-key="67">C</kbd>
			<kbd class="key" data-key="86">V</kbd>
			<kbd class="key" data-key="66">B</kbd>
			<kbd class="key" data-key="78">N</kbd>
			<kbd class="key" data-key="77">M</kbd>
			<kbd class="key" data-key="188"><span class="top-key">&lt;</span><span class="bottom-key">,</span></kbd>
			<kbd class="key" data-key="190"><span class="top-key">&gt;</span><span class="bottom-key">.</span></kbd>
			<kbd class="key" data-key="191"><span class="top-key">?</span><span class="bottom-key">/</span></kbd>
			<kbd class="key key-break-3" data-key="38"><span class="span-arrow">&nbsp;</span></kbd>
			<kbd class="key key-arrow" data-key="38"><span class="span-arrow">&uarr;</span></kbd>
			<kbd class="key key-break-3" data-key="38"><span class="span-arrow">&nbsp;</span></kbd>
		</div>
	
		<div class="key-row">
			<kbd class="key key-ctrl" data-key="17">Ctrl</kbd>
			<kbd class="key key-win" data-key="91">Win</kbd>
			<kbd class="key key-alt" data-key="18">Alt</kbd>
			<kbd class="key key-space" data-key="32">Space</kbd>
			<kbd class="key key-menu" data-key="93">Menu</kbd>
			<kbd class="key key-arrow" data-key="37"><span class="span-arrow">&larr;</span></kbd>
			<kbd class="key key-arrow" data-key="40"><span class="span-arrow">&darr;</span></kbd>
			<kbd class="key key-arrow" data-key="39"><span class="span-arrow">&rarr;</span></kbd>
		</div>
	
	</div>
</div>
/**
  * fixer CSS with => http://autoprefixer.github.io/
  */

.keyboard-container {
    overflow: auto;
}

.keyboard {
    font-size: 6px;
    display: inline-block;
    background: #424242;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    overflow: auto;
    padding: 0.5em;
    border-radius: 0.5em;
    -webkit-box-shadow: 0.063em 0.063em 0 0.125em #333232;
            box-shadow: 0.063em 0.063em 0 0.125em #333232;
    border: 0.063em solid #585858;
    margin: 0 auto;
}

.key-row {
    clear: both;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

.key {
    display: inline-block;
    position: relative;
    background: #333;
    text-align: center;
    color: #eee;
    float: left;
    border-radius: 0.3em;
    margin: 0.2em;
    padding: 0.2em;
    width: 3em;
    height: 3em;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    /* cursor: none; */
    border: 0.063em solid #444;
    -webkit-box-shadow: 0 0.2em 0 0.05em #222;
            box-shadow: 0 0.2em 0 0.05em #222;
    border-bottom-color: #555;
    font-family: monospace;
    font-size: 1em;
	line-height: 1.2;
}

.key.active, .key:focus {
    border-color: #000db5;
    border-bottom-color: #000975;
    background: #0414de;
    color: #fff;
    position: relative;
    top: 0.2em;
    -webkit-box-shadow: 0 0 0 0.05em #000975;
            box-shadow: 0 0 0 0.05em #000975;
    z-index: 100;
}

.key-s {
    height: 1.8em;
}

.top-key {
    display: block;
    margin-bottom: 0.2em;
	font-size: 95%;
}

.bottom-key{
    display: block;
	font-size: 95%;
}

.key-capslock {
	width: 6em;
}

.key-shift {
    width: 8.1em;
}

.key-backspace {
    width: 9em;
}

.key-tab {
    width: 4.5em;
}

.key-ctrl {
	width: 6.5em;
}

.key-win {
    width: 4em;
}

.key-alt {
    width: 4em;
}

.key-space {
    width: 22em;
}

.key-menu {
    width: 4em;
}

.key-enter {
    width: 6em;
    background: transparent;
    -webkit-box-shadow: none;
            box-shadow: none;
    border-color: transparent;
}

.key-enter:before {
    content: "";
    position: absolute;
    display: block;
    height: 3em;
    background: #333333;
    top: -123%;
    left: -25%;
    width: 124%;
    border: 0.063em solid #444;
    -webkit-box-shadow: 0 0.2em 0 0.05em #222;
            box-shadow: 0 0.2em 0 0.05em #222;
    border-bottom-color: #555;
    font-family: monospace;
    border-radius: 0.3em 0.3em 0 0.3em;
}

.key-enter:after {
    content: "";
    position: absolute;
    display: block;
    height: 117%;
    background: #333333;
    top: -0.55em;
    left: -0.063em;
    width: 100%;
    border: 0.063em solid #444;
    border-top-color: transparent;
    -webkit-box-shadow: 0 0.2em 0 0.05em #222;
            box-shadow: 0 0.2em 0 0.05em #222;
    border-bottom-color: #555;
    border-radius: 0 0 0.3em 0.3em;
}

.key-enter.active:before {
    border-color: #000db5;
    border-bottom-color: #000975;
    background: #0414de;
    -webkit-box-shadow: 0 0 0 0.05em #000975;
            box-shadow: 0 0 0 0.05em #000975;
}

.key-enter.active:after {
    background: #0414de;
    border-color: #000db5;
    border-top-color: transparent;
    -webkit-box-shadow: 0 0.063em 0 0.01em #000975;
            box-shadow: 0 0.063em 0 0.01em #000975;
    border-bottom-color: #000975;
}


.key-enter span {
    position: relative;
    height: 1.5em;
    display: block;
    top: -62%;
    z-index: 2;
}

.key-enter span:before {
	content: "";
	posrotion: absolute;
}

.key-arrow {
    width: 3.3em;
    background: #f13c3c;
    border: 0.063em solid #e83333;
    -webkit-box-shadow: 0 0.2em 0 0.05em #bf0c0c;
            box-shadow: 0 0.2em 0 0.05em #bf0c0c;
    border-bottom-color: #d04040;
}

.span-arrow {
    display: block;
    font-weight: bold;
    font-size: 200%;
}

.key-break-1 {
    height: 1.8em;
    visibility: hidden;
}

.key-break-2 {
    height: 1.8em;
    width: 2.58em;
    visibility: hidden;
}

.key-break-3 {
    width: 3.3em;
    visibility: hidden;
}
var selectorEvent = $(window);

//https://keycode.info/
var keyPreventDefault = [
    "112", // F1
    "114", // F3
    "116", // F5
    "117"  // F6
];


//keydown
selectorEvent.on("keydown", function (event) {
    var key = event.keyCode;
    for (var i in keyPreventDefault) {
        if (key == keyPreventDefault[i]) {
            event.preventDefault();
        }
    }
    
    if (key == 20) //capslock
    {
        $(".key[data-key='" + key + "']").toggleClass("active");
    } else {
        $(".key[data-key='" + key + "']").addClass("active");
    }
});


//keyup
selectorEvent.on("keyup", function (event) {
    var key = event.keyCode;
    if (key != 20) //capslock
    {
        $(".key[data-key='" + key + "']").removeClass("active");
    }
});


//size
$(document).on("change", ".change-size", function (event) {
    var keyboard = $(".keyboard");
    var value = $(this).val();
    keyboard.css({
        "font-size": value + "px"
    });
});

//detect if CapsLock ON
selectorEvent.on( "keypress", function( event ){
	var CapsLock =  event.originalEvent.getModifierState("CapsLock");
	if( CapsLock == true  ){
		$( ".key[data-key='20']" ).addClass( "active" );
	}
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.