<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"> </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"> </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"> </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">&</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"><</span><span class="bottom-key">,</span></kbd>
<kbd class="key" data-key="190"><span class="top-key">></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"> </span></kbd>
<kbd class="key key-arrow" data-key="38"><span class="span-arrow">↑</span></kbd>
<kbd class="key key-break-3" data-key="38"><span class="span-arrow"> </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">←</span></kbd>
<kbd class="key key-arrow" data-key="40"><span class="span-arrow">↓</span></kbd>
<kbd class="key key-arrow" data-key="39"><span class="span-arrow">→</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.