Cattura del tasto TAB nella casella di testo

Mi piacerebbe essere in grado di usare il tasto Tab all’interno di una casella di testo per passare su quattro spazi. Così com’è ora, il tasto Tab salta il cursore sull’ingresso successivo.

Esiste qualche codice JavaScript che catturerà il tasto Tab nella casella di testo prima che raggiunga l’interfaccia utente?

Capisco che alcuni browser (es. FireFox) potrebbero non permetterlo. Che ne dici di una combinazione di tasti personalizzati come Maiusc + Tab o Ctrl + Q ?

Anche se acquisisci l’ keydown / keyup , questi sono gli unici eventi triggersti ​​dal tasto tab, hai ancora bisogno di un modo per impedire il verificarsi dell’azione predefinita, passando all’elemento successivo nell’ordine di tabulazione.

In Firefox è ansible chiamare il metodo preventDefault() sull’object evento passato al gestore eventi. In IE, devi restituire false dall’handle dell’evento. La libreria JQuery fornisce un metodo preventDefault sul suo object evento che funziona in IE e FF.

     

Preferirei che l’indentazione della tabulazione non funzionasse piuttosto che rompere le tabulazioni tra gli elementi del modulo.

Se vuoi far rientrare il codice nella casella Markdown, usa Ctrl + K (o ⌘K su un Mac).

In termini di interruzione effettiva dell’azione, jQuery (che utilizza Overflow dello stack) interromperà un evento da bubbling quando si restituisce false da un callback di un evento. Ciò rende la vita più facile per lavorare con più browser.

La risposta precedente va bene, ma io sono uno di quei ragazzi che è fermamente contrario al comportamento di miscelazione con la presentazione (inserendo JavaScript nel mio HTML) quindi preferisco inserire la logica di gestione degli eventi nei miei file JavaScript. Inoltre, non tutti i browser implementano lo stesso evento (oe). Potresti voler fare un controllo prima di eseguire qualsiasi logica:

 document.onkeydown = TabExample; function TabExample(evt) { var evt = (evt) ? evt : ((event) ? event : null); var tabKey = 9; if(evt.keyCode == tabKey) { // do work } } 

Vorrei sconsigliare di cambiare il comportamento predefinito di una chiave. Faccio il più ansible senza toccare il mouse, quindi se si rende il mio tasto Tab non si sposta al campo successivo su un modulo sarò molto aggravato.

Un tasto di scelta rapida potrebbe tuttavia essere utile, specialmente con blocchi di codice di grandi dimensioni e nidificazione. Shift-TAB è una ctriggers opzione perché normalmente mi porta al campo precedente di un modulo. Forse un nuovo pulsante sull’editor WMD per inserire un codice-TAB, con un tasto di scelta rapida, sarebbe ansible?

c’è un problema nella migliore risposta data da ScottKoon

Eccolo

 } else if(el.attachEvent ) { myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */ } 

Dovrebbe essere

 } else if(myInput.attachEvent ) { myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */ } 

A causa di ciò non ha funzionato in IE. Sperando che ScottKoon aggiorni il codice

In Chrome sul Mac, alt-tab inserisce un carattere di tabulazione in un campo .

Eccone uno: Wee!