spostando la tastiera virtuale

Stocreandounatastieravirtualeusandojavascript/html/css.Enonriescoatrovareunbuonalgoritmoperpassaredaunpulsanteall'altroindirezionidiverse(alto-basso,sinistra-destra).Diciamochehoilfocusimpostatosuunoqualsiasideipulsanti-comedovreitrovareilpulsantechedovrebbeesseremessoafuocoinseguito.tuttiipensierieleideesarebberoapprezzati.

Eccounesempiodistrutturadelcodice

rigaconitastifunzionali

<divclass="keyboard-row">
        <a href="#" id="langSwitch" class="largeKey" lang-code="en" data-index="0">ENG</a>
        <div class="charRow">
             <a href="#" class="key" id="key2" data-index="1">1</a>

             <a href="#" class="key" id="key3" data-index="2">2</a>

             <a href="#" class="key" id="key4" data-index="3">3</a>

             <a href="#" class="key" id="key5" data-index="4">4</a>

             <a href="#" class="key" id="key6" data-index="5">5</a>

             <a href="#" class="key" id="key7" data-index="6">6</a>

             <a href="#" class="key" id="key8" data-index="7">7</a>

             <a href="#" class="key" id="key9" data-index="8">8</a>

             <a href="#" class="key" id="key10" data-index="9">9</a>

             <a href="#" class="key" id="key11" data-index="10">0</a>

             <a href="#" class="key" id="key12" data-index="11">_</a>
        </div>
        <a href="#" id="enter" class="largeKey" data-index="12">Search</a>
    </div>

fila solo con caratteri

<div class="keyboard-row">
        <div class="charRow">
             <a href="#" class="key" id="key1" data-index="0">a</a>

             <a href="#" class="key" id="key2" data-index="1">s</a>

             <a href="#" class="key" id="key3" data-index="2">d</a>

             <a href="#" class="key" id="key4" data-index="3">f</a>

             <a href="#" class="key" id="key5" data-index="4">g</a>

             <a href="#" class="key" id="key6" data-index="5">h</a>

             <a href="#" class="key" id="key7" data-index="6">j</a>

             <a href="#" class="key" id="key8" data-index="7">k</a>

             <a href="#" class="key" id="key9" data-index="8">l</a>
        </div>
    </div>

Anche il layout è formato dinamicamente in base alla configurazione del file di lingua. Pertanto, le righe contenenti caratteri di lettere possono avere un numero diverso di tasti in base alla lingua selezionata.

Le chiavi Functianal sono statiche per tutte le lingue. L'impostazione della lingua viene salvata in un oggetto javascript

var langObj = {
......
  row3: [
        {
            value:"q"
        },{

            value:"w"
        },{

            value:"e"
        },....
],
row 4 :[...].....
}

dove ogni proprietà di riga risponde al layout di riga della tastiera

Ho aggiunto l'attributo "data-index" a ogni chiave in una riga come suggerito da Kilian Foth, quindi ora con jquery posso spostarmi orizzontalmente. il codice è successivo (potrebbe essere necessario qualche miglioramento)

   function moveLeft(e){
            e.preventDefault();
            var $el = $(e.target),
                $parentRow = $el.parents(".keyboard-row");

            if(!$el.is($("a:first", $parentRow ))){
                var nextIndex = parseInt($el.attr("data-index")) - 1
                $parentRow.find("[data-index='" + nextIndex + "']").focus();
            }
            else $parentRow.find("a:last").focus();
        }

Ora il problema principale si sta spostando verticalmente. Vorrei suggerire di trovare le coordinate del pulsante attualmente focalizzato e quindi di capire quale pulsante si interseca verticalmente con le coordinate Y con quello corrente e se esiste addirittura. Ma non so ancora come farlo