In this tutorial, we’ll explore how to build a virtual keyboard using HTML, CSS, and JavaScript. A virtual keyboard can be a useful addition to web applications, especially those involving user input. We’ll create a responsive and interactive keyboard that allows users to simulate typing without a physical keyboard.
Read Also: How to Create BMP to PNG Converter
HTML Structure:
The HTML structure includes an output box for displaying typed content and a grid-based layout for the keyboard keys. Each key represents a character, including special keys for functionalities like backspace, space, and enter.
<div class="keyboard-container">
<div class="output-box">
<input type="text" id="output" style="font-size: 18px; padding: 10px; width: 100%; box-sizing: border-box; border: none;">
</div>
<div class="keyboard">
<div class="row">
<button class="key tab">Tab</button>
<button class="key">Q</button>
<button class="key">W</button>
<button class="key">E</button>
<button class="key">R</button>
<button class="key">T</button>
<button class="key">Y</button>
<button class="key">U</button>
<button class="key">I</button>
<button class="key">O</button>
<button class="key">P</button>
</div>
<div class="row">
<button class="key shift">Shift</button>
<button class="key">A</button>
<button class="key">S</button>
<button class="key">D</button>
<button class="key">F</button>
<button class="key">G</button>
<button class="key">H</button>
<button class="key">J</button>
<button class="key">K</button>
<button class="key">L</button>
</div>
<div class="row">
<button class="key capslock">Caps Lock</button>
<button class="key">Z</button>
<button class="key">X</button>
<button class="key">C</button>
<button class="key">V</button>
<button class="key">B</button>
<button class="key">N</button>
<button class="key">M</button>
<button class="key special backspace">Backspace</button>
</div>
<div class="row">
<button class="key special space">Space</button>
<button class="key special enter">Enter</button>
<button class="key special">Del</button>
</div>
</div>
</div>Styling with CSS:
We’ll style the keyboard and output box for a clean and user-friendly appearance. This involves defining key styles, layout alignments, responsiveness, and adding visual elements like shadows and borders for better aesthetics.
<style>
/* CSS Styles */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.keyboard-container {
display: flex;
flex-direction: column;
align-items: center;
}
.output-box {
width: 80%;
max-width: 500px;
margin-bottom: 20px;
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: white;
border-radius: 5px;
border: 2px solid #ccc;
}
.keyboard {
display: grid;
gap: 5px;
justify-content: center;
}
.row {
display: flex;
justify-content: center;
margin-bottom: 5px;
}
.key {
width: 50px;
height: 50px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
background-color: white;
}
/* Adjustments for special keys */
.key.special {
background-color: #eee;
}
.space {
flex-grow: 1; /* Takes all available space */
}
.enter {
flex-grow: 1;
}
.backspace {
/* Adjust width as needed */
width: 110px;
}
.shift{/* Adjust width as needed */
width: 110px;}
.capslock{width:100px;}
.capslock.active {
background-color: #ddd;
width:100px;
}
</style>JavaScript Functionality:
Using JavaScript, we’ll add functionality to the virtual keyboard. This includes handling key presses, updating the output box accordingly, implementing special keys for space, backspace, enter, delete, and introducing a Caps Lock toggle for uppercase and lowercase characters.
<script>
// JavaScript
const keys = document.querySelectorAll('.key');
const output = document.getElementById('output');
let capsLockActive = false;
function toggleCapsLock() {
capsLockActive = !capsLockActive;
const capsLockButton = document.querySelector('.capslock');
capsLockButton.classList.toggle('active', capsLockActive);
const letters = document.querySelectorAll('.key:not(.special):not(.capslock)');
letters.forEach(letter => {
letter.textContent = capsLockActive ? letter.textContent.toUpperCase() : letter.textContent.toLowerCase();
});
}
function handleKeyPress(event) {
const keyPressed = event.target.textContent;
switch (keyPressed) {
case 'Backspace':
output.value = output.value.slice(0, -1);
break;
case 'Space':
output.value += ' ';
break;
case 'Enter':
output.value += '\n';
break;
case 'Delete':
// Implement delete functionality
console.log('Delete pressed');
break;
case 'Caps Lock':
toggleCapsLock();
break;
default:
output.value += capsLockActive ? keyPressed.toUpperCase() : keyPressed.toLowerCase();
break;
}
}
keys.forEach(key => {
key.addEventListener('click', handleKeyPress);
});
</script>Conclusion
Building a virtual keyboard using HTML, CSS, and JavaScript offers a versatile input solution for web applications. This tutorial will guide you through creating an interactive and visually appealing virtual keyboard that enhances user experience.