Html 使用箭头键在表单中导航
我有一个html表单,它像一个表一样创建(有行和列)。基本上它看起来像excel。 现在我想用箭头键导航,就像在excel中一样。可能吗Html 使用箭头键在表单中导航,html,forms,usability,Html,Forms,Usability,我有一个html表单,它像一个表一样创建(有行和列)。基本上它看起来像excel。 现在我想用箭头键导航,就像在excel中一样。可能吗 <table> <tr> <td/> <td/> </tr> <tr> <td/> <td/> </tr> </table> 是的,一旦我得到你的提示,这很容易。这
<table>
<tr>
<td/>
<td/>
</tr>
<tr>
<td/>
<td/>
</tr>
</table>
是的,一旦我得到你的提示,这很容易。这是我的解决方案:
var UP = 38;
var DOWN = 40;
var LEFT = 37;
var RIGHT = 39;
var TAB = 9;
$('#tab-columns').on('keydown', 'input', function (event) {
var $focused = $(':focus');
var id = ($focused.parents("td").attr('id'));
if (id.startsWith("field_")) {
idArr = id.replace("field_", "").split("_");
row = Number(idArr[0]);
col = Number(idArr[1]);
newId = id;
switch (event.which) {
case UP:
newId = "field_"+(row-1)+"_"+col;
break;
case DOWN:
newId = "field_"+(row+1)+"_"+col;
break;
case TAB:
case RIGHT:
newId = "field_"+row+"_"+(col+1);
break;
case LEFT:
newId = "field_"+row+"_"+(col-1);
break;
default:
// nothing
}
$("#"+newId).find("input").focus();
}
您需要快速搜索:按键事件、按键代码和设置焦点。从那里开始应该相对简单。