填报报表中往往有很多文本框，若使用鼠标移动焦点，速度就慢了，可用 Tab 将焦点移向下一个元素、用 Shift + Tab 将焦点移向上一个元素。
但这似乎还不够。
如上，当前焦点在第二行的第二列，现在希望按向下键焦点移动到第三行第二列、按向上键焦点移动到第一行第二列。
HTML 代码
<table id="table1">
<tr>
<td><input type="text" size="5" id="cell_0_0" /></td>
<td><input type="text" size="5" id="cell_0_1" /></td>
<td><input type="text" size="5" id="cell_0_2" /></td>
</tr>
<tr>
<td><input type="text" size="5" id="cell_1_0" /></td>
<td><input type="text" size="5" id="cell_1_1" /></td>
<td><input type="text" size="5" id="cell_1_2" /></td>
</tr>
<tr>
<td><input type="text" size="5" id="cell_2_0" /></td>
<td><input type="text" size="5" id="cell_2_1" /></td>
<td><input type="text" size="5" id="cell_2_2" /></td>
</tr>
</table>
我们为每个 input 设置合乎一定格式的 id。
ezj 实现代码
$("table1 <input").element.each(function(i, e){
$(e).keydown(function(){
var arr = (ezj.event.getEvent().srcElement || ezj.event.getEvent().target).id.split("_");
var rowIndex = Number.from(arr[1]);
var colIndex = Number.from(arr[2]);
var keyCode = ezj.event.getEvent().keyCode;
if (keyCode == ezj.event.key.down)
{
var nextInput = $("cell_" + (rowIndex + 1) + "_" + colIndex);
if (nextInput.element)
{
nextInput.element.select();
}
}
if (keyCode == ezj.event.key.up)
{
var prevInput = $("cell_" + (rowIndex - 1) + "_" + colIndex);
if (prevInput.element)
{
prevInput.element.select();
}
}
});
});
ezj 官方网站
http://www.itpow.com/products/ezj/
