使用箭头键导航输入
我有以下代码,由于某种原因我无法使用箭头键工作(最多转到上一个tabindex,然后转到下一个tabindex)。
这是代码:
HTML
BOOKING DETAILS
PAYMENT:
Cash Acc CC PP ACCOUNT NO:
PASSENGER:
ACC NAME:
TELEPHONE:
DATE:
LEAD TIME:
TIME:
JOURNEY DETAILS
GENERAL DETAILS
DRV FARE:
CAR TYPE:
Car Est Bus 8B CLIENT FARE:
FLIGHT NO:
MILES:
CAR:
WAITING:
DRIVER:
NOTES
GENERAL NOTES:
OFFICE NOTES:
MISC
RETURN:
PRE BOOKING:
NO. OF JOBS:
BOOKED BY:
<input type="text" id="txt-bookedby" class="input-txt-sml right" tabindex="31" value="" disabled />
jQuery的
// Navigate Docket using Keys var keyUp = 38; var keyDown = 40; $(document).keydown( function(e) { // Key up function if (e.keyCode == keyUp) { $(".move:focus").next().focus(); } if (e.keyCode == keyDown) { $(".move:focus").prev().focus(); } } );
我基本上为所有输入值添加了一个名为“move”的类,但由于某种原因,这对我来说根本不起作用。 任何帮助将非常感激!
它似乎可以工作两个盒子,即拾取器不用于拾取地址,但不能用于任何其他文本框。
这是jsfiddle链接; http://jsfiddle.net/kwx6u8w4/
这是一个应该做你想做的事情的例子。 $(“。move:focus”)。next()。focus(); 是.move元素必须是sibbling。
$(function (){ var keyUp = 38; var keyDown = 40; $(document).keydown( function(e) { var moves = $(".move"); // Key up function if (e.keyCode == keyDown) { for(i = 0; i <= moves.length; i++) { if (moves[i] == $(".move:focus").get(0)) { $(moves[i + 1]).focus(); break; } } } if (e.keyCode == keyUp) { for(i = 0; i <= moves.length; i++) { if (moves[i] == $(".move:focus").get(0)) { $(moves[i - 1]).focus(); break; } } } } ); });
BOOKING DETAILS
PAYMENT:
ACCOUNT NO:
PASSENGER:
ACC NAME:
TELEPHONE:
DATE:
LEAD TIME:
TIME:
JOURNEY DETAILS
GENERAL DETAILS
DRV FARE:
CAR TYPE:
CLIENT FARE:
FLIGHT NO:
MILES:
CAR:
WAITING:
DRIVER:
NOTES
GENERAL NOTES:
OFFICE NOTES:
MISC
RETURN:
PRE BOOKING:
NO. OF JOBS:
BOOKED BY: