Simple Keyboard: tastiera virtuale in JavaScript

Link copiato negli appunti

Simple Keyboard è un ottimo plugin JavaScript, scritto dallo sviluppatore canadese Francisco Hodge, che permette di produrre testo tramite l'utilizzo di una testiera (keyboard) virtuale. Direttamente nella home del progetto troviamo una demo che ci mostra come possiamo utilizzare lo script: premendo sui tasti andremo ad inserire (o cancellare) il testo in un apposito elemento contenitore.

Simple Keyboard è scritto in puro Vanilla JavaScript (completamente conforme agli standard ECMA 6) e non necessita della collaborazione di nessuno script aggiuntivo: è dunque standalone e privo di dipendenze esterne, ma risulta essere perfettamente compatibile con moltissimi componenti extra, tra cui i framework jQuery, Angular, React e Vue. Il plug-in supporta moltissime localizzazioni, tra cui Arabo, Cinese, Inglese, Francese, Tedesco, Hindi, Giapponese, Koreano, Russo, Sindhi, Spagnolo, Tailandese e Urdu.

Ovviamente Simple Keyboard permette di potenziare le sue funzionalità di base con funzionalità extra, tramite appositi moduli. Tra questi troviamo l'Auto-Correct, il Key Navigator e la Swype Keyboard (Swype), che permette di scrivere trascinando il mouse sopra i tasti in un percorso continuativo.

Come sempre, possiamo installare lo script tramite npm:

import Keyboard from 'simple-keyboard';
import swipe from 'swipe-keyboard';
// CSS
import 'simple-keyboard/build/css/index.css';
import 'swipe-keyboard/build/css/index.css';
let keyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button),
  modules: [
    swipe
  ]
});
function onChange(input){
  document.querySelector(".input").value = input;
  console.log("Input changed", input);
}
function onKeyPress(button){
  console.log("Button pressed", button);
}

oppure tramite CDN:

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swipe-keyboard@latest/build/css/index.css">
</head>
<body>
  <input class="input" />
  <div class="keyboardContainer">
    <div class="simple-keyboard"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swipe-keyboard@latest/build/index.min.js"></script>
  <script src="src/index.js"></script>
</body>
</html>

dove lo script index.js potrebbe contenere uno snippet di inizializzazione simile al seguente:

let Keyboard = window.SimpleKeyboard.default;
let swipe = window.SimpleKeyboardSwipe.default;
let keyboard = new Keyboard({
  onChange: input => onChange(input),
  onKeyPress: button => onKeyPress(button),
  modules: [
    swipe
  ]
});
function onChange(input){
  document.querySelector(".input").value = input;
  console.log("Input changed", input);
}
function onKeyPress(button){
  console.log("Button pressed", button);
}

La documentazione ufficiale offre una panoramica completa sulle API di base e sull'implementazione di tutte le funzionalità aggiuntive descritte precedentemente.

Via Simple Keyboard

Simple Keyboard: tastiera virtuale in JavaScript

Ti consigliamo anche