Catturare il tasto TAB nella casella di testo [chiuso]

StackOverflow https://stackoverflow.com/questions/3362

  •  08-06-2019
  •  | 
  •  

Domanda

Mi piacerebbe poter utilizzare il Tab tasto all'interno di una casella di testo per eseguire il tabulazione su quattro spazi.Così com'è adesso, il tasto Tab sposta il cursore sull'input successivo.

Esiste qualche JavaScript che catturerà il tasto Tab nella casella di testo prima che arrivi all'interfaccia utente?

Capisco alcuni browser (ad es.FireFox) potrebbe non consentirlo.Che ne dici di una combinazione di tasti personalizzata come Spostare+Tab, O Ctrl+Q?

È stato utile?

Soluzione

Anche se catturi il keydown/keyup evento, questi sono gli unici eventi attivati ​​dal tasto tab, è comunque necessario un modo per impedire che si verifichi l'azione predefinita, ovvero lo spostamento all'elemento successivo nell'ordine di tabulazione.

In Firefox puoi chiamare il file preventDefault() sull'oggetto evento passato al gestore eventi.In IE, devi restituire false dall'handle dell'evento.La libreria JQuery fornisce a preventDefault metodo 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>

Altri suggerimenti

Preferirei che il rientro delle schede non funzionasse piuttosto che interrompere la tabulazione tra gli elementi del modulo.

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

In termini di interruzione effettiva dell'azione, jQuery (utilizzato da Stack Overflow) interromperà il gorgoglio di un evento quando restituisci false da un callback di evento.Ciò semplifica la vita quando si lavora con più browser.

La risposta precedente va bene, ma 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
  }
}

Consiglierei di non 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 in un modulo mi arrabbierò molto.

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

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 funzionava in IE.Spero che ScottKoon aggiorni il codice

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

Eccone uno:.Weh!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top