jQuery: come acquisire il tasto TAB all'interno di una casella di testo


145

Voglio catturare la pressione del tasto TAB, annullare l'azione predefinita e chiamare la mia funzione javascript.

Risposte:


249

Modifica: poiché l'elemento viene inserito in modo dinamico, è necessario utilizzare delegatoon() come nell'esempio, ma è necessario associarlo all'evento keydown, poiché come commenta @Marc, in IE l'evento keypress non acquisisce chiavi non di carattere:

$("#parentOfTextbox").on('keydown', '#textbox', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    // call custom function here
  } 
});

Guarda un esempio qui .


quando premo TAB in IE6 + l'evento non si attiva (si attiva su qualsiasi chiave alfanumerica) ... Ho bisogno di usare .live ('keypress', fn)
— Jon Erickson

Se funziona solo con live, forse stai inserendo l'elemento della casella di testo in modo dinamico, se l'elemento è già nella pagina, funzionerà, controlla questo esempio: jsbin.com/oguhe
— CMS

sì, la casella di testo viene inserita in modo dinamico. il mio esempio con id #textbox è stato solo per semplificare la domanda =)
— Jon Erickson,

@Jon, il motivo per cui non stai usando $ (selettore) .live ("keydown", fn) è? CMS suggerisce di usare il keydown perché in IE, il keypress non funziona per i tasti non di carattere (come Tab)
— Marc

5
@AppleGrew: lo dice sì, ma non è vero - almeno per la pressione dei tasti. Per Tab e.che è 0 e e.keyCode è 9 (come dovrebbe essere). Testato in FF 3.5.16, jQuery 1.6.2.
— johndodo,

19

Esempio di lavoro in jQuery 1.9:

$('body').on('keydown', '#textbox', function(e) {
    if (e.which == 9) {
        e.preventDefault();
        // do your code
    }
});

2
fare e.preventDefault();doppio per impedire l'inserimento di spazi bianchi nella casella di testo.
— stil

12
$('#textbox').live('keypress', function(e) {
    if (e.keyCode === 9) {
        e.preventDefault();
        // do work
    }
});

2
Inoltre, per annullare l'azione predefinita, utilizzare e.preventDefault (); nella prima riga della funzione.
— Josh Leitzel,

@Jon, keypress non acquisisce chiavi non di carattere in IE
— Marc

@Marc Lo vedo, come posso essere compatibile con IE e FF?
— Jon Erickson,

4
^^ L'ironia ... jQuery dovrebbe colmare il divario tra broswers, in modo da non doverti preoccupare di cose come questa.
— Jagd,

@Jagd, jQuery non può dedurre l'intento. keypress e keydown non sono equivalenti per una buona ragione. Accade così, questa situazione non richiede distinzione.
— Marc,

7

I metodi sopra indicati non hanno funzionato per me, forse sto usando un po 'di vecchio jquery, quindi finalmente lo snippet di codice mostrato di seguito funziona per - pubblicare nel caso in cui qualcuno nella mia stessa posizione

$('#textBox').live('keydown', function(e) {
    if (e.keyCode == 9) {
        e.preventDefault();
        alert('tab');
    }
});

5

Una parte importante dell'uso di una chiave in giù nella scheda è sapere che la scheda proverà sempre a fare già qualcosa, non dimenticare di "restituire false" alla fine.

Ecco cosa ho fatto. Ho una funzione che gira su .blur e una funzione che scambia dove è il mio focus forma. Fondamentalmente aggiunge un input alla fine del modulo e ci va durante l'esecuzione di calcoli sulla sfocatura.

$(this).children('input[type=text]').blur(timeEntered).keydown(function (e) {
        var code = e.keyCode || e.which;
        if (code == "9") {
            window.tabPressed = true;
            // Here is the external function you want to call, let your external
            // function handle all your custom code, then return false to
            // prevent the tab button from doing whatever it would naturally do.
            focusShift($(this));
            return false;
        } else {
            window.tabPressed = false;
        }
        // This is the code i want to execute, it might be different than yours
        function focusShift(trigger) {
            var focalPoint = false;
            if (tabPressed == true) {
                console.log($(trigger).parents("td").next("td"));
                focalPoint = $(trigger).parents("td").next("td");

            }
            if (focalPoint) {
                $(focalPoint).trigger("click");
            }
        }
    });

4

Prova questo:

$('#contra').focusout(function (){
    $('#btnPassword').focus();
});

1

Supponiamo di avere TextBox con ID txtName

$("[id*=txtName]").on('keydown', function(e) { 
  var keyCode = e.keyCode || e.which; 
  if (keyCode == 9) {
     e.preventDefault();
     alert('Tab Pressed');
 }
}); 

1

È possibile acquisire una scheda evento utilizzando questa API JQuery.

$( "#yourInputTextId" ).keydown(function(evt) {
   if(evt.key === "Tab")
      //call your function
});

funziona per me dopo aver aggiunto evt.preventDefault (); nel if
— LowFieldTheory il

-1

Questo ha funzionato per me:

$("[id*=txtName]").on('keydown', function(e) { var keyCode = e.keyCode || e.which; if (keyCode == 9) { e.preventDefault(); alert('Tab Pressed'); } });

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.