Non Enter!

È uno dei problemi di usabilità più delicati, soprattutto perchè riguarda una procedura di per sè importante come può essere […]

È uno dei problemi di usabilità più delicati, soprattutto perchè riguarda una procedura di per sè importante come può essere la compilazione di un modulo. Non ci riferiamo certo ad un modello si semplicità come il modulo di ricerca di Google. Ma in certi casi, con form lunghi e complessi, può essere una buona idea disabilitare il tasto INVIO. Come si sa, il suo utilizzo equivale al click sul pulsante di submit. Ottimo, comodo. Ma cosa succede se nel bel mezzo di una compilazione lo si preme per errore? Nel migliore dei casi, bisogna tornare indietro e rifare tutto. Lo script che presentiamo è una delle tante soluzioni possibili per implementare con Javascript il blocco del tasto INVIO.

  • esempio.htm

## 1: LA SEZIONE JAVASCRIPT

Nella sezione <head></head> trova posto la parte fondamentale dello script:

function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which :
event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}

Si tratta di una funzione (handleEnter) che riceve due parametri: il riferimento al campo del modulo e all’evento. L’evento viene catturato nel modo consueto, facendo cioè leva sul codice associato al tasto INVIO (13). Se il tasto viene premuto mentre il focus è su uno dei campi a cui è associato lo script, il focus passa al campo successivo invece che inviare il modulo. Il codice va lasciato intatto.

## 2: RICHIAMO INTERNO ALLA PAGINA WEB

Nel corpo della pagina inseriremo ovviamente un form. Nel codice dei campi di testo sarà sufficiente aggiungere il richiamo alla funzione vista qui sopra:

<input type=”text” onkeypress=”return handleEnter(this, event)”>
<input type=”text” onkeypress=”return handleEnter(this, event)”>
<textarea>Area di testo</textarea>

Il richiamo avviene tramite l’evento ‘onkeypress’. I parametri passati sono semplicissimi. ‘This’ fa riferimento al campo stesso, ‘event’ è autoesplicativo. Non è necessario aggiungere niente alla textarea in quanto in questo tipo di campo la pressione del tasto INVIO crea solo una nuova riga, senza inviare il modulo.

I Video di HTML.it

Ionic + Parse, approccio value-driven per lo sviluppo mobile

Nicola Sanitate è fondatore di ApuliaSoft oltre ad essere un esponente importante della community CDS (Club Degli Sviluppatori) di ci […]