Table of Contents
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.
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
<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
Now that we have completed our javascript section, Here is our updated output with javascript. Hope 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
code isn't working
code is not working