我正在使用带有 datepicker 的 JQuery ui，当用户在某个字段上使用选项卡时，他们会适当地弹出日历。
这里是代码。 （也可以设置标签索引）
<input type="text" name="demo" />
<input type="text" class="date" />
jquery代码为：
$(".date").datepicker();
关于我如何解决这个问题的任何建议（最短解决方案的奖励）？
【问题讨论】：
订阅onClose 或onSelect 事件：
$("#someinput").datepicker(
{
// other options goes here
onSelect: function ()
{
// The "this" keyword refers to the input (in this case: #someinput)
this.focus();
}
});
或者在onClose的情况下：
$("#someinput").datepicker(
{
onClose: function ()
{
this.focus();
}
});
【讨论】：
感谢 Jeff 的建议，我修改了您的 onSelect 函数以使用属性过滤器仅检索具有“nexttab”指定的 tabindex 的元素。
$(function(){
$(".date").datepicker({
onSelect: function(){
currenttab = $(el).attr("tabindex");
nexttab = currenttab * 1 + 1;
$("[tabindex='" + nexttab + "']").focus();
}
});
});
PS： 如果您的代码中没有指定 tabindexes，就像我之前忽略的那样，只需添加以下代码：
$('input, select').each(function(i, val){
$(this).attr('tabindex', i + 1);
});
【讨论】：
请参阅有关此问题的讨论 http://bugs.jqueryui.com/ticket/7266 有一个解决方案 http://jsfiddle.net/lankarden/9FtnW/
【讨论】：
类似于 Jimmy 的方法，但这会将焦点设置为日历图标（假设您的日历使用图标），当我有多个日期选择器并排放置时，我发现这种方式更合适。
设置日期默认选项，以便在日历弹出窗口关闭时将焦点设置为图标：
$(".date").datepicker({
onClose: function() {
$(this).next('a').focus();
}
});
为日历图标添加标签，使其具有焦点：
$(".date").each(function() {
$($(this).next('img')).wrap($("<A/>").attr("href","#"));
});
【讨论】：
如果您真的不关心 Tab 键顺序，也就是说，没有分配它以便它遵循页面的流程，您可以这样做。
jQuery('.date').datepicker({
'onSelect': function(){
$(this).nextAll('input, button, textarea, a').filter(':first').focus();
}
});
它的工作假设是当用户选择日期时，他完成了该字段并移至下一个字段，因此它只是选择下一个字段。
【讨论】：
当日期选择器关闭时，您可能可以使用onClose 事件将焦点返回到您的输入，因为this 指的是该回调中的关联输入字段。例如：
$('.date').datepicker({
onClose: function() { this.focus(); }
});
【讨论】：
让它专注于同一个框最终会导致日期选择器重新弹出，我们真正想要的是让它进入下一个字段。这是设计的解决方案：
这实际上将所选字段移动到下一个元素，而不是当前焦点
$(function(){ $(".date").datepicker({ onSelect: function(){ currenttab = $(this).attr("tabindex"); nexttab = currenttab * 1 + 1; $(":input").each(function(){ if ($(this).attr("tabindex") == nexttab) $(this).focus(); }); } }); });
感谢任何改进此技术的建议。
【讨论】：
我也必须解决这个问题，发现给定的答案并不是我想要的。这就是我所做的。
blog 提到了一个 jQuery 函数，它允许您选择屏幕上的下一个表单元素。我将它导入到我的项目中并在日期选择器对话框的关闭时调用它。
如果链接失效，这里是函数
$.fn.focusNextInputField = function() {
return this.each(function() {
var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
var index = fields.index( this );
if ( index > -1 && ( index + 1 ) < fields.length ) {
fields.eq( index + 1 ).focus();
}
return false;
});
};
然后在日期选择器的关闭时简单地调用它
$(this).datepicker({
onClose: function () {
$(this).focusNextInputField();
}
});
希望这对未来的访客有所帮助。
【讨论】：
按下回车键（默认选择今天的日期）或使用此按钮从日历中单击日期时，我能够将焦点移到下一个输入字段
$(".jqDateField").datepicker('option', {
dateFormat: 'mm/dd/y', onClose: function () {
$(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
}
});
如果您在“方式”中有选择或输入按钮，则可能需要将焦点设置在下一个文本输入上
$(':input[type="text"]:eq(' + ($(':input[type="text"]').index(this) + 1) + ')')
【讨论】：
我在 datepicker 输入控件旁边添加了一个空的 href 标记，并在 onClose 事件处理程序中关注它。这解决了我在日历关闭时焦点一直转移到页面顶部的问题。我正在使用那个 href 标签来显示错误消息；因此它对我有两个目的。
【讨论】：