bloggers bloggers

Oggi, mentre ero su Google per cercare di risolvere un problema, mi sono imbattuto in una funzionalità molto poco documentata di AlloyUI, ma allo stesso tempo estremamente utile.

In pratica questa funzionalità permette di gestire il caso in cui si voglia associare un event handler ad un elemento della pagina (ad esempio un campo di input), ma solo in funzione di una determinata combinazione di tasti: ad esempio, se premo CTRL+F mentre sto riempiendo il campo di un form, parte una chiamata Ajax. Il tutto ovviamente senza dover diventare matti a controllare quali tasti ho premuto ed a creare una catena infinita di if/else.

Tipicamente questa problematica si risolve appunto gestendo l'evento keypress e controllando il keyCode premuto; ma con una combinazione di tasti può diventare complesso. Ma non per AlloyUI!

So che state già scalpitando quindi ecco alcuni esempi:

A.all('input[type="text"]').on('key', function(event) {
    alert('Tasto F premuto');
}, 'down:70');

A.all('input[type="text"]').on('key', function(event) {
    alert('Tasto F premuto insieme a SHIFT');
}, 'down:70+shift');

A.all('input[type="text"]').on('key', function(event) {
    alert('Tasto F premuto insieme a CTRL');
}, 'down:70+ctrl');

A.all('input[type="text"]').on('key', function(event) {
    alert('Tasto F premuto insieme a SHIFT e ALT');
}, 'down:70+shift+alt');

A.all('input[type="text"]').on('key', function(event) {
    alert('Tasto F premuto (e poi rilasciato) insieme a SHIFT');
}, 'up:70+shift');

In pratica c'è un terzo argomento per la funzione on che rappresenta appunto la combinazione di tasti per cui deve essere eseguito l'event handler; solo quella combinazione di tasti e non altre!

Attenzione che l'evento da intercettare è key e non il classico keypress; per quanto riguarda invece la definizione della combinazione di tasti non ho trovato documentazione ma ho capito che:

• down: significa tasto premuto;
• up: significa tasto rilasciato;
• il carattere + combina i tasti;
• i tasti funzione sono identificati da shift, alt, ctrl, ...

Purtroppo non ho trovato ulteriore documentazione e non ho voglia di guardarmi i sorgenti di AlloyUI, quindi lascio a voi il divertimento. I codici dei tasti che ho usato negli esempi li ho trovati qui: https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes.

Solo io trovo che sia una figata?!