Wirtualna klawiatura to świetny sposób na ułatwienie użytkownikom wpisywania tekstu, zwłaszcza na urządzeniach dotykowych. Możesz ją spotkać w bankomatach, panelach logowania, kioskach informacyjnych, a nawet w grach przeglądarkowych. Co najlepsze – stworzenie takiej klawiatury wcale nie jest trudne. Wystarczy odrobina HTML, CSS i odrobina JavaScriptu, żeby wszystko działało jak należy.
W tym artykule pokażę Ci, jak krok po kroku zbudować własną klawiaturę ekranową, jak ją ostylować i jak sprawić, żeby działała jak prawdziwa. Nie będziemy kopiować gotowców – wszystko tworzymy od zera, własnymi słowami i w przyjaznym, ludzkim stylu.
Dlaczego warto stworzyć własną wirtualną klawiaturę?
Możesz zapytać: „Po co mi wirtualna klawiatura, skoro przeglądarki mają swoje?”. I masz rację – mają. Ale:
- nie zawsze chcesz polegać na systemowej klawiaturze,
- czasem potrzebujesz klawiatury z własnym układem,
- możesz chcieć ograniczyć wpisywanie tylko do cyfr lub znaków specjalnych,
- w aplikacjach kioskowych systemowa klawiatura często jest wyłączona,
- możesz chcieć stworzyć coś bardziej stylowego i dopasowanego do designu strony.
Wirtualna klawiatura daje Ci pełną kontrolę – od wyglądu, przez układ, aż po zachowanie.
Jak działa wirtualna klawiatura?
Zasada jest banalnie prosta:
- Tworzysz przyciski reprezentujące klawisze.
- Każdy przycisk po kliknięciu dodaje znak do pola tekstowego.
- CSS odpowiada za wygląd.
- JavaScript za logikę.
To wszystko. A teraz przejdźmy do praktyki.
Tworzymy wirtualną klawiaturę – krok po kroku
Poniżej znajdziesz kompletny kod, który możesz wkleić do swojego projektu i od razu zobaczyć działanie klawiatury. Oczywiście możesz go później rozbudować, zmienić wygląd, dodać animacje – pełna dowolność.
1. HTML – struktura klawiatury
Zaczynamy od prostego układu:
<div class="keyboard-container">
<input type="text" id="keyboard-input" placeholder="Kliknij i pisz..." readonly>
<div class="keyboard">
<div class="row">
<button class="key">1</button>
<button class="key">2</button>
<button class="key">3</button>
<button class="key">4</button>
<button class="key">5</button>
<button class="key">6</button>
<button class="key">7</button>
<button class="key">8</button>
<button class="key">9</button>
<button class="key">0</button>
</div>
<div class="row">
<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">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">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>
</div>
<div class="row">
<button class="key action" id="space">Spacja</button>
<button class="key action" id="backspace">Usuń</button>
</div>
</div>
</div>
To prosty układ, ale już wygląda jak klawiatura. Teraz czas na styl.
2. CSS – wygląd klawiatury
Tutaj możesz zaszaleć, ale ja pokażę Ci elegancki, minimalistyczny styl:
.keyboard-container {
width: 400px;
margin: 40px auto;
text-align: center;
font-family: Arial, sans-serif;
}
#keyboard-input {
width: 100%;
padding: 15px;
font-size: 20px;
margin-bottom: 20px;
border: 2px solid #333;
border-radius: 5px;
}
.keyboard {
display: flex;
flex-direction: column;
gap: 10px;
}
.row {
display: flex;
justify-content: center;
gap: 10px;
}
.key {
padding: 15px 20px;
font-size: 18px;
border: none;
background: #eee;
border-radius: 5px;
cursor: pointer;
transition: 0.2s;
}
.key:hover {
background: #ddd;
}
.key:active {
background: #ccc;
}
.action {
background: #444;
color: #fff;
}
.action:hover {
background: #333;
}
Po dodaniu tego CSS-u klawiatura wygląda schludnie i nowocześnie. Ale nadal nic nie robi – czas na JavaScript.
3. JavaScript – logika działania
Teraz sprawimy, że kliknięcie klawisza będzie dodawać znak do pola tekstowego.
const input = document.getElementById("keyboard-input");
const keys = document.querySelectorAll(".key");
keys.forEach(key => {
key.addEventListener("click", () => {
const value = key.textContent;
if (key.id === "backspace") {
input.value = input.value.slice(0, -1);
} else if (key.id === "space") {
input.value += " ";
} else {
input.value += value;
}
});
});
I gotowe – masz działającą klawiaturę ekranową.
Jak możesz rozbudować tę klawiaturę?
To dopiero początek. Możesz dodać:
- tryb CAPS LOCK,
- klawiaturę numeryczną,
- animacje kliknięć,
- dźwięki klawiszy,
- obsługę znaków specjalnych,
- automatyczne ukrywanie i pokazywanie klawiatury,
- wersję mobilną z większymi klawiszami.
Możesz też stworzyć klawiaturę tematyczną – np. tylko cyfry, tylko litery, albo klawiaturę emoji.
Stworzenie wirtualnej klawiatury w HTML/CSS to świetny sposób na dodanie interaktywności do strony. Nie potrzebujesz żadnych bibliotek ani frameworków – wystarczy czysty HTML, CSS i JavaScript. Dzięki temu masz pełną kontrolę nad wyglądem i działaniem klawiatury.
Możesz wykorzystać ją w panelach logowania, aplikacjach dotykowych, grach, formularzach i wszędzie tam, gdzie chcesz ułatwić użytkownikowi wpisywanie tekstu.