Virtual Keyboard Javascript | Virtual Keyboard Html Css Javascript







Virtual Keyboard Javascript | Virtual Keyboard Html Css Javascript

Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Virtual Keyboard Javascript. We use HTML, Css, and javascript for Virtual Keyboard Javascript. I hope you enjoy our blog so let’s start with a basic HTML structure for the Virtual Keyboard Javascript.

HTML Code

 <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 -->

There is all the HTML code for the Virtual Keyboard Javascript. Now, you can see an output with Virtual Keyboard Javascript then we write javascript for Virtual Keyboard Javascript.

output

Virtual Keyboard Javascript | Virtual Keyboard Html Css Javascript

CSS code

 body {  
margin: 25px;
text-align: center;
background: #000;
}
h1 {
color: #26abde;
}
.virtual-keyboard .row {
text-align: center;
margin: 0 0 15px;
}
.virtual-keyboard .row.spacebar input {
padding: 10px 150px;
}
.virtual-keyboard input[type='button'] {
padding: 10px 20px;
border-radius: 30px;
border: 3px solid #202c2b;
background: #13ab9e;
color: #fff;
text-transform: uppercase;
}
.virtual-keyboard input[type='button'].shift-activated {
background: red;
}
.virtual-keyboard input[type='button'].delete, .virtual-keyboard input[type='button'].shift {
text-transform: none;
}
.output {
margin: 15px;
}
.output input {
color: white;
background: black;
border: 0px;
line-height: 2.2em;
text-align: center;
font-size: 2em;
width: 100%;
}
.output input:focus {
outline: none;
border: 0px;
}
.output ::-webkit-input-placeholder {
color: white;
text-align: center;
font-size: 1em;
}

Css Updated output


Virtual Keyboard Javascript | Virtual Keyboard Html Css Javascript

Javascript (jquery)code

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
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

Final output

Virtual Keyboard Javascript | Virtual Keyboard Html Css Javascript

Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like theVirtual Keyboard Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a  Virtual Keyboard Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code by – Joe Watkins

Share on:

0 thoughts on “Virtual Keyboard Javascript | Virtual Keyboard Html Css Javascript”

Leave a Comment