An interactive virtual keyboard that repeats every key you press and a text area where everything is typed and can be copied to the clipboard with the click of a button.
An interactive JavaScript-supported virtual keyboard that highlights the hotkeys as you type.
How to make use of it:
1. Code the HTML for the digital keyboard.
<div class="bgKeyboard">
<div class="startMsg">Press any key to Continue...</div>
<div class="keyboard">
<div class="row numberLine">
<div class="blacktick">`</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="seven">7</div>
<div class="eight">8</div>
<div class="nine">9</div>
<div class="zero">0</div>
<div class="minus">-</div>
<div class="equalsTo">=</div>
<div class="backspace">BACKSPACE</div>
</div>
<div class="row alphaUpperLine">
<div class="tab">TAB</div>
<div class="q">Q</div>
<div class="w">W</div>
<div class="e">E</div>
<div class="r">R</div>
<div class="t">T</div>
<div class="y">Y</div>
<div class="u">U</div>
<div class="i">I</div>
<div class="o">O</div>
<div class="p">P</div>
<div class="openedBracket">[</div>
<div class="closedBracket">]</div>
<div class="backSlash">\</div>
</div>
<div class="row alphaMiddleLine">
<div class="capslock">CAPS<br />LOCK</div>
<div class="a">A</div>
<div class="s">S</div>
<div class="d">D</div>
<div class="f">F</div>
<div class="g">G</div>
<div class="h">H</div>
<div class="j">J</div>
<div class="k">K</div>
<div class="l">L</div>
<div class="semicolon">;</div>
<div class="quote">'</div>
<div class="enter">ENTER</div>
</div>
<div class="row alphaLowerLine">
<div class="lShift">SHIFT</div>
<div class="z">Z</div>
<div class="x">X</div>
<div class="c">C</div>
<div class="v">V</div>
<div class="b">B</div>
<div class="n">N</div>
<div class="m">M</div>
<div class="comma">,</div>
<div class="fullstop">.</div>
<div class="frontSlash">/</div>
<div class="rShift">SHIFT</div>
</div>
<div class="row BottomLine">
<div class="lCtrl">CTRL</div>
<div class="lFunction">FN</div>
<div class="win">WIN</div>
<div class="lAlt">ALT</div>
<div class="space">SPACE</div>
<div class="rAlt">ALT</div>
<div class="rFunction">FN</div>
<div class="rCtrl">CTRL</div>
</div>
</div>
</div>2. Place the primary script on the backside of the web page.
<script src="script.js"></script>
3. The mandatory CSS types.
.bgKeyboard {
width: 1008px;
height: 350px;
background-color: rgb(255, 219, 174);
border-radius: 20px;
margin: 0;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.startMsg {
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.5s linear;
font-size: 44px;
margin: 0;
padding: 0;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.keyboard {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
margin-left: auto;
margin-right: auto;
width: 998px;
height: 350;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.row {
width: 100%;
height: 60px;
}
.numberLine, .alphaUpperLine, .alphaMiddleLine, .alphaLowerLine, .BottomLine {
margin: 5px 0 5px 0;
}
.row div {
display: flex;
justify-content: center;
align-items: center;
float: left;
color: black;
width: 55px;
height: 55px;
border: black 1px solid;
border-radius: 20%;
background: rgb(235, 232, 232);
margin-left: 5px;
margin-right: 5px;
outline: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
div.backspace {
width: 115px;
border-radius: 10px;
font-size: 18px;
}
div.tab, div.backSlash {
width: 85px;
border-radius: 10px;
}
div.capslock {
width: 100px;
border-radius: 10px;
}
div.enter {
width: 137px;
border-radius: 10px;
}
div.lShift {
width: 130px;
border-radius: 10px;
}
div.rShift {
width: 174px;
border-radius: 10px;
}
div.lCtrl {
width: 65px;
border-radius: 10px;
}
div.space {
width: 388px;
border-radius: 10px;
}
div.rCtrl {
width: 174px;
border-radius: 10px;
}
/*Key colors*/
div.blacktick, div.one, div.tab, div.q, div.a, div.lShift, div.z, div.lCtrl, div.win {
background-color: rgb(255, 160, 122);
border-color: rgb(184, 83, 44);
}
div.two, div.w, div.s, div.x {
background-color: rgb(240, 128, 128);
border-color: rgb(180, 81, 81);
;
}
div.three, div.e, div.d, div.c {
background-color: rgb(119, 136, 153);
border-color: rgb(44, 88, 133);
}
div.four, div.five, div.r, div.t, div.f, div.g, div.v, div.b {
background-color: rgb(135, 206, 250);
border-color: rgb(49, 144, 204);
}
div.six, div.seven, div.y, div.u, div.h, div.j, div.n, div.m {
background-color: rgb(173, 216, 230);
border-color: rgb(44, 119, 145);
}
div.eight, div.i, div.k, div.comma {
background-color: rgb(144, 238, 144);
border-color: rgb(60, 187, 60);
}
div.nine, div.o, div.l, div.fullstop {
background-color: rgb(255, 184, 194);
border-color: rgb(180, 70, 84);
}
div.zero, div.minus, div.equalsTo, div.backspace, div.p, div.openedBracket, div.closedBracket, div.backSlash, div.semicolon, div.quote, div.enter, div.frontSlash, div.rShift, div.rCtrl {
background-color: rgb(255, 255, 155);
border-color: rgb(192, 192, 52);
}
div.capslock {
background-color: rgb(255, 222, 173);
border-color: rgb(194, 138, 54);
}
div.rAlt, div.space, div.lAlt {
background-color: rgb(32, 178, 170);
border-color: rgb(9, 109, 104);
}
div.lFunction, div.rFunction {
background-color: rgb(244, 164, 96);
border-color: rgb(167, 91, 25);
}Interactive Virtual Keyboard Plugin/Github, virtual keyboard javascript source code, virtual keyboard html source code, virtual keyboard event javascript
See Demo And Download
Official Website(devang-joshi-dj): Click Here
This superior jQuery/javascript plugin is developed by devang-joshi-dj. For extra Advanced Usage, please go to the official website.
