enter image description here 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>
        <a href="#" id="enter" class="largeKey" data-index="12">Search</a>

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>

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


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

  • 1
    What kind of data structure do you have the key definitions in? It looks as if you'll need both an "index in row" (to move left and right) and a screen X coordinate (to decide which of the keys in the previous row is physically closest when moving up and down). Commented Nov 27, 2014 at 16:09
  • I have edited my question and provided sample data structure. This is just what I find convenient. but any amendments can be done further Commented Nov 27, 2014 at 16:34
  • Why do you need this focus change direction anyway? I.e. what is 'focused next', why would you want to change focus in any particular direction?
    – Jan Doggen
    Commented Nov 27, 2014 at 17:28
  • well, I need to "walk" around my "virtual keyboard"with keyboard left-rigth , up-down arrows. I've found horizontal move solution(added to my post). Now need to move vertically. A good solution seems "to decide which of the keys in the previous row is physically closest when moving up and down"(suggested by Killian Foth) Commented Nov 28, 2014 at 11:02

1 Answer 1


While it would result is much more code, there's nothing inherently wrong with adding "nextLeft, nextDown, etc." to your keys. You'll be able to 100% ensure which key is next when navigating, so all of the guess work is gone.

If you insist on a solution that uses solving, give each key an x offset and width, then when down is pressed, move to the key whose center is closest. You may not even have to define that information if it's already being laid out visually in the DOM, there's already properties for that.

  • well, I have 8 languages to support so each time the layout would be slightly different due to different number of letters in alphabets. That's why to implement first idea would be very laborious for me. second is actually what I have already . I'll share implemented solution a bit later. Commented Dec 11, 2014 at 10:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.