JavaScript Move Focus with Arrow Keys

This tutorial will guide you through the process of implementing Javascript Move Focus With Arrow Keys for enhanced keyboard navigation within a table. This technique is particularly useful for improving accessibility and user experience, allowing users to navigate table cells using the arrow keys instead of solely relying on the tab key.

Setting Up the HTML Structure

First, we need to create the basic HTML structure for our table. This includes the table element itself, table rows (tr), and table data cells (td). Each cell will have a tabindex attribute to make it focusable.

<a href="#" tabindex="1">Start</a>
<p>Tab into first cell in table.</p>
<p>Then, use arrow keys to change focus on cell.</p>
<p>Once you're in a cell you can tab to focus on the links inside.</p>
<p>Then, you can tab out of the cell and resume navigating with your arrows.</p>
<table id="myTable">
  <tr id="l01">
    <td id="l01_1" tabindex="1"><a href="#">one</a>-<a href="#">x</a></td>
    <td id="l01_2" tabindex="0">two-<a href="#">x</a></td>
    <td id="l01_3" tabindex="0">three</td>
  </tr>
  <tr id="l02">
    <td id="l02_1" tabindex="0">one -<a href="#">x</a></td>
    <td id="l02_2" tabindex="0"><a href="#">two</a>-<a href="#">x</td>
    <td id="l02_3" tabindex="0"><a href="#">three</a>-<a href="#">x</td>
  </tr>
  <tr id="l03">
    <td id="l03_1" tabindex="0">one -<a href="#">x</a></td>
    <td id="l03_2" tabindex="0"><a href="#">two</a>-<a href="#">x</td>
    <td id="l03_3" tabindex="0"><a href="#">three</a>-<a href="#">x</td>
  </tr>
  <tr id="l04">
    <td id="l04_1" tabindex="0">one -<a href="#">x</a></td>
    <td id="l04_2" tabindex="0"><a href="#">two</a>-<a href="#">x</td>
    <td id="l04_3" tabindex="0"><a href="#">three</a>-<a href="#">x</td>
  </tr>
</table>
    <script  src="./script.js"></script>

Applying CSS Styles

Next, we will add some CSS to style the table and its cells. This will make the table more visually appealing and easier to navigate. These styles are very basic, but you can extend them as needed.

body {
  font-family: "Arial";
}
body table td {
  padding: 10px;
  background: pink;
  width: 100px;
}

Implementing the JavaScript Logic

This is where the core functionality lies. The JavaScript code will capture keyboard events and move the focus to the appropriate cell based on the arrow key pressed.

var myTable = document.getElementById('myTable');
myTable.onkeydown = function(event) {
  var numberOfCells = document.getElementById('myTable').getElementsByTagName("td").length;
  if(event.keyCode == 37) {
    console.log('left');
    document.getElementById(event.target.id).blur()
    var currentfocus = event.target.id.split('');
    currentfocus.splice(currentfocus.length-1, 1, +currentfocus[currentfocus.length - 1]-1);
    var newfocus = currentfocus.join('');
    document.getElementById(newfocus).focus()
  }
  
  ////////////
  else if (event.keyCode == 39) {
    console.log('right');
    document.getElementById(event.target.id).blur()
    var currentfocus = event.target.id.split('');
    currentfocus.splice(currentfocus.length-1, 1, +currentfocus[currentfocus.length - 1]+1);
    var newfocus = currentfocus.join('');
    document.getElementById(newfocus).focus()
  }
  ////////////
  
  else if (event.keyCode == 38) {
    console.log('up');
    document.getElementById(event.target.id).blur()
    var currentfocus = event.target.id.split('');
    currentfocus.splice(2, 1, +currentfocus[2]-1);
    var newfocus = currentfocus.join('');
    document.getElementById(newfocus).focus();
  }
  else if (event.keyCode == 40) {
    console.log('down');
    document.getElementById(event.target.id).blur()
    var currentfocus = event.target.id.split('');
    currentfocus.splice(2,1, +currentfocus[2]+1);
    var newfocus = currentfocus.join('');
    document.getElementById(newfocus).focus();
  }
};

Final Touches

Congratulations! You have successfully implemented Javascript Move Focus With Arrow Keys. This technique enhances keyboard navigation and improves accessibility for users interacting with your table.