当用鼠标selectdate时，JQuery UI Datepicker失去焦点
我正在使用JQuery UI和datepicker，当用户select一个字段，他们适当地得到日历popup。
- 用户选项卡（通过键到字段
- 用户用鼠标点击selectdate
- 用户选项卡
- Tabindex从1开始（在表单的开头）
这里是代码。 （也可能有标签索引集）
<input type="text" name="demo" /> <input type="text" class="date" /> jquery代码是：
$(".date").datepicker();
关于如何解决这个问题的任何build议（奖金最短的解决scheme）？
订阅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(); } });
有关此问题的讨论，请访问http://bugs.jqueryui.com/ticket/7266 ， url为http://jsfiddle.net/lankarden/9FtnW/
谢谢Jeff的build议，我修改了你的onSelect函数，使用属性filter只检索由“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); });
类似于吉米的方法，但是这将焦点设置到日历图标（假设您的日历使用图标），当我有多个dateselect器相邻时，我发现这种方式更合适。
设置date默认选项，以便在日历popup窗口closures时将焦点设置为图标：
$(".date").datepicker({ onClose: function() { $(this).next('a').focus(); } });
为日历图标添加一个标签，以便它可以进行聚焦：
$(".date").each(function() { $($(this).next('img')).wrap($("<A/>").attr("href","#")); });
如果你真的不关心Tab键的顺序，也就是没有分配它，所以它跟随页面的stream动，你可以做这样的事情。
jQuery('.date').datepicker({ 'onSelect': function(){ $(this).nextAll('input, button, textarea, a').filter(':first').focus(); } });
它的工作原理是，当用户selectdate时，他完成该字段并转到下一个字段，因此只需select下一个字段。
当datepickerclosures时，您可能可以使用onClose事件来将焦点返回到您的input，因为this是指该callback中的关联input字段。 例如：
$('.date').datepicker({ onClose: function() { this.focus(); } });
将它集中在同一个盒子上最终会使dateselect器popup来，我们真正想要的是将它移到下一个字段。 这是一个devise的解决scheme：
- 需要在您的字段上设置tabindex属性。
- 这是从string转换为JavaScript（* 1）中的int。
-
这实际上将选定的字段移动到下一个元素，而不是当前焦点
$(function(){ $(".date").datepicker({ onSelect: function(){ currenttab = $(this).attr("tabindex"); nexttab = currenttab * 1 + 1; $(":input").each(function(){ if ($(this).attr("tabindex") == nexttab) $(this).focus(); }); } }); });
任何build议，以改善这种技术，赞赏。
我也必须解决这个问题，并发现给出的答案不是我正在寻找的。 这是我做的。
博客提到了一个jQuery函数，可以让你select屏幕上的下一个表单元素。 我将其导入到我的项目中，并将其命名为datePicker对话框的closures。
万一链路死了，这是function
$.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; }); };
然后简单地把它叫做datepicker的closures
$(this).datepicker({ onClose: function () { $(this).focusNextInputField(); } });
希望这有助于未来的游客。
按下回车键（默认select今天的date），或者点击日历中的date后，我可以通过使用此button将焦点移到下一个input字段
$(".jqDateField").datepicker('option', { dateFormat: 'mm/dd/y', onClose: function () { $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus(); } });
这可能需要设置焦点在下一个文本input，因为你有一个select或inputbutton的方式“
$(':input[type="text"]:eq(' + ($(':input[type="text"]').index(this) + 1) + ')')
