Acquisizione del tasto TAB nella casella di testo [chiuso]

100

Mi piacerebbe poter usare il file Tab chiave all'interno di una casella di testo per tabulare su quattro spazi. Così com'è ora, il tasto Tab salta il cursore sull'input successivo.

C'è qualche JavaScript che catturerà il tasto Tab nella casella di testo prima che si sporga nell'interfaccia utente?

Capisco che alcuni browser (ad esempio FireFox) potrebbero non consentire questo. Che ne dici di una combinazione di tasti personalizzata come Shift+ Tabo Ctrl+ Q?

javascript user-interface

— Seibar
fonte

Non dimenticare di controllare la finestra focalizzata e lascia che si gonfi normalmente se non sei nell'area di testo dell'editor.

— FlySwat

Questo post è stato contrassegnato dal moderatore come "appartiene a meta.stackoverflow.com", ma ha più di due anni, quindi non lo sto migrando.

— Robert Harvey

108

Anche se si cattura l' evento keydown/ keyup, questi sono gli unici eventi attivati dal tasto Tab, è comunque necessario un modo per impedire che si verifichi l'azione predefinita, spostandosi all'elemento successivo nell'ordine di tabulazione.

In Firefox puoi chiamare il preventDefault()metodo sull'oggetto evento passato al tuo gestore di eventi. In IE, devi restituire false dall'handle dell'evento. La libreria JQuery fornisce un preventDefaultmetodo sul suo oggetto evento che funziona in IE e FF.

<body>
<input type="text" id="myInput">
<script type="text/javascript">
    var myInput = document.getElementById("myInput");
    if(myInput.addEventListener ) {
        myInput.addEventListener('keydown',this.keyHandler,false);
    } else if(myInput.attachEvent ) {
        myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
    }

    function keyHandler(e) {
        var TABKEY = 9;
        if(e.keyCode == TABKEY) {
            this.value += "    ";
            if(e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }
    }
</script>
</body>

— ScottKoon
fonte

1

Ho appena corretto la riga 4, da "if (el.attachEvent)" a "if (myInput.attachEvent)"

— Fenton

Notare che questo codice aggiunge TAB solo alla fine. È scomodo nella maggior parte delle occasioni.

— Alexander Palamarchuk

@SteveFenton C'è un modo semplice per rimuovere di nuovo gli spazi con keycode 8?

— yckart

18

Preferisco che il rientro della tabulazione non funzioni piuttosto che interrompere il tabulazione tra gli elementi del modulo.

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

In termini di arresto effettivo dell'azione, jQuery (utilizzato da Stack Overflow) interromperà il bubbling di un evento quando restituisci false da un callback di evento. Questo semplifica la vita per lavorare con più browser.

— Lauren
fonte

13

La risposta precedente va bene, ma io sono uno di quei ragazzi che è fermamente contrario a mescolare il comportamento con la presentazione (inserendo JavaScript nel mio HTML), quindi preferisco inserire la mia logica di gestione degli eventi nei miei file JavaScript. Inoltre, non tutti i browser implementano l'evento (o e) allo stesso modo. 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
  }
}

— Tom
fonte

6

Sconsiglio di modificare il comportamento predefinito di una chiave. Faccio il più possibile senza toccare il mouse, quindi se fai in modo che il mio tasto tab non si sposti al campo successivo di un modulo sarò molto irritato.

Tuttavia, un tasto di scelta rapida potrebbe essere utile, soprattutto con blocchi di codice di grandi dimensioni e annidamenti. Shift-TAB è una cattiva opzione perché normalmente mi porta al campo precedente in un modulo. Forse un nuovo pulsante nell'editor WMD per inserire una TAB del codice, con un tasto di scelta rapida, sarebbe possibile?

— Wally Lawless
fonte

1

La domanda dipende interamente dall'applicazione. Sto lavorando a un controllo dell'editor di codice. Non ho fornito un tasto tab e tutti i miei studenti si sono lamentati. Non l'ho fatto perché non volevo interrompere l'accessibilità per il mio unico studente cieco. Ora ho aggiunto il supporto per le schede, ma ho anche fornito un'opzione di preferenza dell'utente per disattivarlo.

— Charles

@Charles ottimo punto sulle implicazioni dell'accessibilità.

— Wally Lawless

4

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 */
}

Per questo motivo non ha funzionato in IE. Sperando che ScottKoon aggiorni il codice

— chintan123
fonte

3

In Chrome su Mac, alt-tab inserisce un carattere di tabulazione in un <textarea>campo.

Eccone uno:. Wee!

— Paul D. Waite
fonte