jQuery Movin up down keys
by Brodingo
HTML
<script src="//www.addressfinder.co.nz/assets/v2/widget.js"></script>
<table>
<thead>
<tr><th>one</th><th>two</th><th>tree</th></tr>
</thead>
<tbody>
<tr>
<td><input type="text" class='inputtxt' name='input'></td>
<td><input type="text" class='inputtxt' name='input'></td>
<td><input type="text" class='inputtxt' name='input'></td>
</tr>
<tr>
<td><input type="text" class='inputtxt' name='input'></td>
<td><input type="text" class='inputtxt' name='input'></td>
<td><input type="text" class='inputtxt' name='input'></td>
</tr>
<tr>
<td><input type="text" class='inputtxt' name='input'></td>
<td><input type="text" class='inputtxt' name='input'></td>
<td><input type="text" class='inputtxt' name='input'></td>
</tr>
</tbody>
</table>
JavaScript
var map = {
37: "left",
38: "up",
39: "right",
40: "down"
};
$(document).ready(function() {
$("input").on("keydown", function(e) {
var dir = map[e.keyCode];
if (dir && !e.shiftKey) {
var $t = $(e.target);
var caretPos = e.target.selectionStart;
var val = $t.val();
var $td = $t.closest("td");
var $tr = $td.closest("tr");
var hIndex = $td.index();
switch(dir) {
case "left":
if (caretPos === 0 ) {
$td.prev().find("input").focus();
e.preventDefault();
}
break;
case "right":
if (caretPos >= val.length) {
$td.next().find("input").focus();
e.preventDefault();
}
break;
case "up":
$tr.prev().find("td").eq(hIndex).find("input").focus();
e.preventDefault();
break;
case "down":
$tr.next().find("td").eq(hIndex).find("input").focus();
e.preventDefault();
break;
}
}
});
});