我用 malsup 的表单插件创建了一个表单，它在输入更改时提交。我已经设置了我的 jQuery 脚本来索引下拉菜单和可见输入，并使用该索引来确定 tab 的 keydown 是否应该将焦点移动到下一个元素或第一个元素，同样使用 shift+tab keydown。但是，不是像我希望的那样将焦点从 tab keydown 上的最后一个元素移到第一个元素，而是将焦点移到第二个元素。如何将其更改为将焦点循环到实际的第一个和最后一个元素？这是我的表单的实时链接：http: //www.presspound.org/calculator/ajax/sample.php。感谢任何试图提供帮助的人。这是我的脚本：
$(document).ready(function() {
var options = {
target: '#c_main',
success: setFocus
};
$('#calculator').live('submit', function() {
$(this).ajaxSubmit(options);
return false;
});
$(this).focusin(function(event) {
var shiftDown = false;
$('input, select').each(function (i) {
$(this).data('initial', $(this).val());
});
$('input, select').keyup(function(event) {
if (event.keyCode==16) {
shiftDown = false;
$('#shiftCatch').val(shiftDown);
}
});
$('input, select').keydown(function(event) {
if (event.keyCode==16) {
shiftDown = true;
$('#shiftCatch').val(shiftDown);
}
if (event.keyCode==13) {
$('#captured').val(event.target.id);
} else if (event.keyCode==9 && shiftDown==false) {
return $(event.target).each(function() {
var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible');
var index = fields.index(this);
var nextEl = fields.eq(index+1).attr('id');
var firstEl = fields.eq(0).attr('id');
var focusEl = '#'+firstEl;
if (index>-1 && (index+1)<fields.length) {
$('#captured').val(nextEl);
} else if(index+1>=fields.length) {
if ($(this).val() != $(this).data('initial')) {
$('#captured').val(firstEl);
} else {
event.preventDefault();
$(focusEl).focus();
}
}
return false;
});
} else if (event.keyCode==9 && shiftDown==true) {
return $(event.target).each(function() {
var fields = $(this).parents('form:eq(0),calculator').find('select, input:visible');
var index = fields.index(this);
var prevEl = fields.eq(index-1).attr('id');
var lastEl = fields.eq(fields.length-1).attr('id');
var focusEl = '#'+lastEl;
if (index<fields.length && (index-1)>-1) {
$('#captured').val(prevEl);
} else if (index==0) {
if ($(this).val() != $(this).data('initial')) {
$('#captured').val(lastEl);
} else {
event.preventDefault();
$(focusEl).select();
}
}
return false;
});
}
});
});
}); function setFocus() { with (document.calculator) var recap = document.getElementById(recaptured.value); if (recap!=null) { setTimeout(function() { if (recap.getAttribute('type')=='text') { recap.select(); } else { recap.focus(); } }, 100 ); } }
编辑#1：我对代码做了一些小改动，这让我更接近脚本的预期功能。但是，我只对与焦点有关的代码进行了一次更改：我试图在最后一个元素上按下时禁用 tab keydown（以及第一个元素上的 shift+tab keydown），以试图将焦点放在我想要的元素，而不是像它一直在做的那样跳过它。这是我添加的代码：
$(this).one('keydown', function (event) {
return !(event.keyCode==9 && shiftDown==true);
});
这种作品。页面加载后，如果用户在最后一个元素上按下 tab 而不更改其值，则焦点将设置到第二个元素。但是，用户第二次在最后一个元素上按下制表符而不更改其值时，以及此后的每一次，焦点都将设置为第一个元素，就像我希望的那样。
编辑#2：我将编辑#1 中的代码替换为使用event.preventDefault() 的代码，这样效果更好。而如果用户在第一个元素中执行 shift+tab keydown，则焦点将移至最后一个元素。但是，如果用户继续按住 shift 键并再次按 tab，焦点将被设置回第一个元素。如果用户继续按住 shift 键并点击 tab，焦点将移回最后一个元素。焦点将在第一个和最后一个元素之间来回移动，直到用户抬起 shift 键。仅按 Tab 时不会出现此问题。这是新的代码片段：
event.preventDefault();
$(focusEl).focus();