用鼠标选择日期时,jquery UI日期选取器失去焦点

订阅 onClose 或 onSelect 事件:

$("#someinput").datepicker(
{
    // other options goes here
    onSelect: function ()
    {
        // The "this" keyword refers to the input (in this case: #someinput)
        this.focus();
    }
});

或者在 关闭 :

$("#someinput").datepicker(
{
    onClose: function ()
    {
        this.focus();
    }
});

感谢Jeff的建议,我修改了onSelect函数,使用属性过滤器只检索带有“nextab”指定的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/

类似于吉米的方法,但这将焦点设置为日历图标(假设您的日历使用图标),我发现当我旁边有多个日期选择器时,这种方法更合适。

设置日期默认选项,以便在日历弹出窗口关闭时将焦点设置为图标:

    $(".date").datepicker({
        onClose: function() {
            $(this).next('a').focus(); 
        }
    });

为日历图标添加一个标记,使其可聚焦:

    $(".date").each(function() {
        $($(this).next('img')).wrap($("<A/>").attr("href","#"));
    });

如果你真的不关心标签顺序,也就是说,没有分配它,所以它遵循页面的流程,你可以这样做。

jQuery('.date').datepicker({
    'onSelect': function(){
        $(this).nextAll('input, button, textarea, a').filter(':first').focus();
    }
});

它的工作假设是,当用户选择日期时,他将完成该字段并移动到下一个字段,因此它只选择下一个字段。

您可能可以使用 onClose 事件以在日期选取器关闭时将焦点返回到输入,如 this 引用该回调中关联的输入字段。例如:

$('.date').datepicker({
   onClose: function() { this.focus(); }
});

将它集中在同一个框上最终会导致日期选择器弹出,我们真正想要的是它转到下一个字段。以下是我们设计的解决方案:

1. 要求在字段上设置tabindex属性。
2. 这是在javascript中将字符串强制转换为int(即*1)。

3. 这实际上将所选字段移动到下一个元素,而不是当前焦点

   $(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函数,它允许您选择屏幕上的下一个表单元素。我将它导入到我的项目中,并在datepicker对话框中调用它。

如果链接失效,功能如下

$.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();
    }
});

希望这能帮助未来的游客。

按Enter键(默认情况下选择当前日期)或单击日历中的某个日期后,我可以将焦点转到下一个输入字段。

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