I’m creating virtual keyboard using javascript/html/css. And I can’t find a good algorithm for moving from one button to another in different directions (top-bottom, left-right). Lets say I have focus set to any of the buttons – how should I find which button should be focused next. any thoughs and ideas would be appreciated.

Here is code structure sample

row with functional keys

<div class="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>

row only with chars

<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>

Also layout is formed dynamically based on language file config. So rows that have letter characters can have different number of keys depending on language selected.

Functianal keys are static for all languages. Language setting is saved in a javascript object

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

            value:"w"
        },{

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

where each row property responds to keyboard row layout

I’ve added “data-index” attribute to each key in a row as suggested by Kilian Foth so now with jquery I can move horizontally. code is next(might need some improvements)

   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();
        }

Now the main problem is moving verticaly. I would suggest finding coordinates of currently focused button and then figuring out which button vertically intersects by Y-coordinates with the current one and if it even exists. But dont know how to do it yet