Skip to content

Instantly share code, notes, and snippets.

@JBlond
Forked from josheinstein/index.html
Created June 10, 2016 15:41
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JBlond/112622a3117654a3d350ff692f3a0ada to your computer and use it in GitHub Desktop.
Save JBlond/112622a3117654a3d350ff692f3a0ada to your computer and use it in GitHub Desktop.
A CodePen by Josh Einstein. Keyboard Navigation in Table Cells - Uses jQuery to enable arrow key functionality in tables. Pressing up/down/left/right in input fields will move focus to adjacent cells. Doesn't currently deal with column spans or custom input scenarios such as on-the-fly input fields.
<table id="people">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Phone Number</th>
<th>Location</th>
</thead>
<tbody>
<tr>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
</tr>
<tr>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
</tr>
<tr>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
</tr>
<tr>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
</tr>
<tr>
<td><input /></td>
<td><input /></td>
<td><input /></td>
<td><input /></td>
</tr>
</tbody>
</table>
(function ($) {
$.fn.enableCellNavigation = function () {
var arrow = { left: 37, up: 38, right: 39, down: 40 };
// select all on focus
this.find('input').keydown(function (e) {
// shortcut for key other than arrow keys
if ($.inArray(e.which, [arrow.left, arrow.up, arrow.right, arrow.down]) < 0) { return; }
var input = e.target;
var td = $(e.target).closest('td');
var moveTo = null;
switch (e.which) {
case arrow.left: {
if (input.selectionStart == 0) {
moveTo = td.prev('td:has(input,textarea)');
}
break;
}
case arrow.right: {
if (input.selectionEnd == input.value.length) {
moveTo = td.next('td:has(input,textarea)');
}
break;
}
case arrow.up:
case arrow.down: {
var tr = td.closest('tr');
var pos = td[0].cellIndex;
var moveToRow = null;
if (e.which == arrow.down) {
moveToRow = tr.next('tr');
}
else if (e.which == arrow.up) {
moveToRow = tr.prev('tr');
}
if (moveToRow.length) {
moveTo = $(moveToRow[0].cells[pos]);
}
break;
}
}
if (moveTo && moveTo.length) {
e.preventDefault();
moveTo.find('input,textarea').each(function (i, input) {
input.focus();
input.select();
});
}
});
};
})(jQuery);
$(function() {
$('#people').enableCellNavigation();
});
#people {
border-collapse: collapse;
margin: 5px;
th {
background-color: #ccc;
color: #000;
font-weight: normal;
}
td, th {
border: 1px solid #ccc;
margin: 0;
padding: 4px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment