当用鼠标selectdate时,JQuery UI Datepicker失去焦点

我正在使用JQuery UI和datepicker,当用户select一个字段,他们适当地得到日历popup。

  1. 用户选项卡(通过键到字段
  2. 用户用鼠标点击selectdate
  3. 用户选项卡
  4. Tabindex从1开始(在表单的开头)

这里是代码。 (也可能有标签索引集)

<input type="text" name="demo" /> <input type="text" class="date" /> 

jquery代码是:

 $(".date").datepicker(); 

关于如何解决这个问题的任何build议(奖金最短的解决scheme)?

订阅onCloseonSelect事件:

 $("#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:

  1. 需要在您的字段上设置tabindex属性。
  2. 这是从string转换为JavaScript(* 1)中的int。
  3. 这实际上将选定的字段移动到下一个元素,而不是当前焦点

     $(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) + ')')