2013-07-23 7 views
10

Ho una casella di input che si comporta come una ricerca (simile a Facebook). Sto usando jquery sull'evento key-press che funziona bene. Il problema è che non posso scorrere verso il basso sul set dei risultati usando i tasti freccia, ogni volta che uno di essi viene premuto i risultati della ricerca vengono rigenerati. Quindi è possibile ignorare il/shift/scheda tasti freccia eccEvento di pressione JQuery ignora i tasti di direzione

http://jsfiddle.net/UU6KG/

$("#search-form .search-terms").on("keypress", function(){ 
     $("#search-items #autocom").fadeIn(); 
    }); 

Grazie

risposta

27

È necessario filtrare i codici chiave freccia (37,38,39,40), prova questo:

Nota il function(e) al posto di function() - questo consente di afferrare l'evento e quindi il codice chiave.

$('#search-form .search-terms').on('keydown', function(e){ 
    // get keycode of current keypress event 
    var code = (e.keyCode || e.which); 

    // do nothing if it's an arrow key 
    if(code == 37 || code == 38 || code == 39 || code == 40) { 
     return; 
    } 

    // do normal behaviour for any other key 
    $('#search-items #autocom').fadeIn(); 
}); 

Click for a list of key codes

Una nota dei documenti su keypress/keyup/keydown:

noti che keydown e keyup fornire un codice che indica quale tasto viene premuto, mentre keypress indica quale personaggio è stato inserito. Ad esempio, una "a" minuscola verrà riportata come 65 da keydown e keyup, ma come 97 da keypress. Una "A" maiuscola viene riportata come 65 da tutti gli eventi. A causa di questa distinzione, quando si catturano combinazioni di tasti speciali come i tasti freccia, .keydown() o .keyup() è una scelta migliore.

Il keypress evento lavora in quasi tutte le situazioni, ma è prudente utilizzare keyup o keydown perché alcuni browser (penso che una qualche versione precedente di Firefox) non rilevano alcuni tasti, come ad esempio tasti freccia, utilizzando l'evento keypress.

+1

Grazie mille per la risposta dettagliata, fiddle aggiornato: http://jsfiddle.net/UU6KG/1/ – Athanatos

0
$(".search-terms").live('keydown',function(event){     
if(event.which>=37 && event.which<=40) 
       { 
        reutrn; 

       } 
1

Vorrei anche segnalare che dovresti ignorare le altre chiavi che non dovrebbero generare direttamente una nuova query. Chiavi come shift, scroll-lock e end, ad esempio. Dopo aver consultato la stessa keycode list che @theyetiman legato a, sono arrivato fino a questo if a ignorare tutte le chiavi che non dovrebbe importare (notare lo swap di keypress per keyup per consentire la cattura di chiavi importanti come backspace):

$('.search-terms').on('keyup', function(ev) { 
    if ((ev.keyCode > = 9 && ev.keyCode <= 45) || (ev.keyCode >= 91 || ev.keyCode <= 93) || (ev.keyCode >= 112 || ev.keyCode <= 145)) { 
     return; 
    } 
}); 
+0

L'elenco dei codici è interessante, ma probabilmente c'è un errore nella logica della condizione (sono colpevole di copia + incollare!). Inoltre, nel tuo esempio, lo spazio char viene ignorato. Per l'altra copia + pasters: Va bene se stanno scrivendo alla fine, ma se l'utente ha una freccia sinistra e uno spazio premuto, i dati potrebbero cambiare. – Mayyit

Problemi correlati