Tastiera Virtuale JavaScript per pagine HTML
Ti spiego come aggiungere una tastiera virtuale alle tue pagine HTML. Ottima soluzione gratuita per creare interfacce touchscreen, ma non solo!
Se hai la necessità di aggiungere una tastiera virtuale alle tue pagine HTML, ti spiego come ho fatto io in semplici passi.
Una tastiera virtuale (o virtual-keyboard) è una tastiera grafica che compare sullo schermo del computer permettendo l’inserimento di testo (lettere, numeri, simboli).
Ce ne sono di diversi tipi. Io personalmente ne o provate diverse, ritengo che questa che ti propongo sia la migliore.
Nel mio caso specifico avevo bisogno di una tastiera da utilizzare su schermo touch, con le seguenti caratteristiche:
- che fosse personalizzabile, ovvero in cui i tasti da visualizzare fossero ben determinati
- che comparisse a schermo solo quando un campo di testo è selezionato (ha il focus)
Ho utilizzato questo progetto open-source https://github.com/Mottie/Keyboard
di cui puoi vedere una demo qui: https://mottie.github.io/Keyboard/
ti spiego passo passo come integrarla in una pagina HTML.
Se non ti interessa capire passo passo come fare, vai direttamente alla fine di questo articolo, troverai il pacchetto scaricabile e pronto all’uso!
1. Prepara una pagina HTML
Il primo passo è creare una pagina HTML vuota.
Crea una cartella vuota, chiamala “virtualkeyboard” e mettici dento un file “index.html” come questo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
2. Scarica la libreria Javascript
Scarica da qui il progetto Mottie Virtual Keyboard https://github.com/Mottie/Keyboard
e decomprimilo all’interno della tua cartella “virtualkeyboard”
Otterrai una seconda cartella chiamata “Keyboard-master” con all’interno tutti files javascript e css necessari al funzionamento della tastiera.
3. Aggiungi le librerie JavaScript e CSS
Aggiungi nella sezione <HEAD> del file index.html il collegamento a:
- una libreria jQuery
- la libreria virtual-keyboard
- il CSS necessario
in questo modo:
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Virtual Keyboard -->
<script src="keyboard-master/dist/js/jquery.keyboard.min.js"></script>
<link rel="stylesheet" href="keyboard-master/css/keyboard-basic.css">
4. Aggiungi un campo di testo
Una tastiera è utile solo se c’è uno spazio per poterci scrivere dentro, giusto?
Allora crea un campo di tipo testo e assegnagli l’ID “my-input-field“
Tradotto in codice, inserisci nel tag <BODY> il seguente codice:
<form action="">
<label for="my_input_field">Focus me:</label><input type="text" name="my_input_field" id="my_input_field">
</form>
5. Aggiungi la funzione JavaScript per attivare la tastiera
Sempre nel tag <HEAD> inserisci questo codice:
<script>
$(document).ready(function() {
$.keyboard.keyaction.RETURN = function(base) {
$('.ui-keyboard').blur();
do_something();
};
$('#my_input_field').keyboard({
layout: 'custom',
// only use !! in the action key layout
customLayout: {
'default': [
"1 2 3 4 5 6 7 8 9 0 - _ {bksp}",
"Q W E R T Y U I O P /",
'A S D F G H J K L {RETURN}',
"Z X C V B N M , .",
"{space} @"
],
},
display:
{
'VIEW': 'Invio'
},
usePreview: false,
autoAccept: true,
display:
{
'bksp' : "\u2190"
}
})
// activate the typing extension
.addTyping({
showTyping: true,
delay: 250
});
});
function do_something()
{
alert("DO SOMETHING !");
}
</script>
Come puoi notare al caricamento delle librerie jQuery si innesca la funzione $(document).ready
la quale richiama la costruzione della tastiera sul campo di testo con ID=my_input_field tramite la funzione: $(‘#my_input_field’).keyboard({……
Nota che all’interno di questa funzione, nella proprietà customLayout sono specificati tutti i tasti che la tastiera deve avere, dichiarati riga per riga.
E’ stato dichiarato anche un tasto “custom” chiamato “RETURN” che se premuto richiama la funzione do_something() che si occuperà di stampare un se,plice popup a video.
La dichiarazione di cosa deve fare il tasto RETURN una volta premuto è dichiarato proprio all’inizio del codice, attraverso le righe:
$.keyboard.keyaction.RETURN = function(base) {
$('.ui-keyboard').blur();
do_something();
};
6. Il codice completo
Riassumendo, il codice completo per il file index.html è il seguente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Virtual Keyboard -->
<script src="keyboard-master/dist/js/jquery.keyboard.min.js"></script>
<link rel="stylesheet" href="keyboard-master/css/keyboard-basic.css">
<title>Document</title>
<script>
$( document ).ready(function() {
$.keyboard.keyaction.RETURN = function(base) {
$('.ui-keyboard').blur();
do_something();
};
$('#my_input_field').keyboard({
layout: 'custom',
// only use !! in the action key layout
customLayout: {
'default': [
"1 2 3 4 5 6 7 8 9 0 - _ {bksp}",
"Q W E R T Y U I O P /",
'A S D F G H J K L {RETURN}',
"Z X C V B N M , .",
"{space} @"
],
},
display:
{
'VIEW': 'Invio'
},
usePreview: false,
autoAccept: true,
display:
{
'bksp' : "\u2190"
}
})
// activate the typing extension
.addTyping({
showTyping: true,
delay: 250
});
});
function do_something()
{
alert("DO SOMETHING !");
}
</script>
</head>
<body>
<form action="">
<label for="my_input_field">Focus me:</label><input type="text" name="my_input_field" id="my_input_field">
</form>
</body>
</html>
7. Il risultato finale
Abbiamo finito!
Ora apri il file index.html con un doppio click, il risultato è una pagina bianca con un campo di testo vuoto:
Facendo click all’interno del campo con il mouse oppure con il dito (se usi un monitor touch), comparirà al di sotto la tastiera virtuale
A questo punto è possibile scrivere cliccando sui bottoni in corrispondenza delle lettere, o con il mouse o con il dito (se hai un touchscreen).
Facendo “click” sul tasto RETURN si attiva la funzione “do_something” che fa comparire un alert “DO SOMETHING !”
Togliendo il focus dal campo, la tastiera scompare.
8. Miglioramenti
Per il mio progetto specifico la tastiera era troppo piccola, dato che utilizzo schermi grandi.
Ho quindi creato un secondo file CSS (alternativo a quello di default) aumentando la grandezza dei tasti. Questo file l’ho chiamato “keyboard-master/css/keyboard-basic-custom.css” e lo trovi nel pacchetto scaricabile alla fine di quesro artricolo.
Nel pacchetto trovi anche il file CSS STANDARD: “keyboard-master/css/keyboard-basic.css”
Scegli tu quello da utilizzare!
Se vuoi avere tasti più grandi utilizza questo file:
<link rel="stylesheet" href="keyboard-master/css/keyboard-basic-custom.css">
Se invece vuoi utilizzare il file CSS di default del pacchetto “virtual-keyboard” utilizza questo file:
<link rel="stylesheet" href="keyboard-master/css/keyboard-basic.css">
Se vuoi provarlo puoi trovare qui sotto l’intero progetto pronto all’uso.
9. Scarica il pacchetto completo
Se ti interessa provare subito il codice dell’esempio, scarica il pacchetto completo qui.
10. Altri esempi di configurazioni
Se vuoi provare altri esempi di configurazioni ti rimando a questa pagina: https://mottie.github.io/Keyboard/
Aiutami a sostenere questo blog
Se vuoi puoi aiutarmi concretamente a sostenere questo blog. Puoi farlo con una donazione libera, con carta di credito o paypal. Te ne sarò riconoscente.
