bloggers bloggers

Marco Napolitano
Messaggi: 79
Stelle: 0
Data: 17/02/22
Jader Jed Francia
Messaggi: 63
Stelle: 0
Data: 18/02/21
Paolo Gambetti
Messaggi: 2
Stelle: 0
Data: 11/11/19
Katia Pazzi
Messaggi: 1
Stelle: 0
Data: 27/06/19
Ezio Lombardi
Messaggi: 11
Stelle: 0
Data: 10/04/18
Chiara Mambretti
Messaggi: 25
Stelle: 0
Data: 27/02/17
Serena Traversi
Messaggi: 3
Stelle: 0
Data: 21/07/16
Francesco Falanga
Messaggi: 8
Stelle: 0
Data: 14/06/16
Antonio Musarra
Messaggi: 2
Stelle: 0
Data: 18/11/13
Simone Celli Marchi
Messaggi: 6
Stelle: 0
Data: 09/07/13
Indietro

Condizionare un event handler ad una combinazione di tasti con AlloyUI

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?! laugh

Commenti
Nessun commento. Vuoi essere il primo.