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.