Impostazione dello stato attivo utilizzando le frecce sinistra e destra (HTML + JS)

Question

Esiste un modo per far sì che la freccia sinistra si comporti come il pulsante scheda (imposta lo stato attivo sull'elemento successivo attivabile) e la freccia destra si comporta come uno spostamento + scheda (imposta lo stato attivo sull'elemento precedente attivabile)?

Sono arrivato così lontano:

$().keypress(function(e) {
    if (e.keyCode == 37) {
        alert('I want to do a shift-tab');
    }
    else if (e.keyCode == 39) {
        alert('I want to do a tab');
    }
});

Ma google non è così utile, quindi ho pensato di mettere un post veloce qui mentre google ancora un po '.

Grazie!

Oh, ed è puramente per FF3.0, quindi non devo preoccuparmi di altri fastidi del browser.

Answer 1

Ciò che hai finora sembra andare bene.

Potresti tenere un elenco di elementi 'focalizzabili' e semplicemente scorrere l'elenco mantenendo un puntatore a quello corrente:

// or $('input')..depends what you want to focus on
var nodes = $('.focusable'), idx = -1;
$().keypress( function(e) {
   if (e.keyCode === 37) {
     nodes.get(++idx).focus();
    }
    else if (e.keyCode === 39) {
       nodes.get(--idx).focus();
    }
 });

Questo è solo uno schema approssimativo. Dovresti controllare idx prima di fare qualcosa per assicurarti di non oltrepassare l'inizio o la fine della matrice degli elementi focalizzabili. Dovrai anche fare attenzione a chiamarlo quando l'utente si trova all'interno di una casella di testo.