使用鼠标选择日期时，JQuery UI日期选择器失去焦点

我将JQuery ui与datepicker一起使用，当用户点击某个字段时，他们会相应地弹出日历

用户选项卡通过按键进入字段 用户通过鼠标单击选择日期 用户选项卡 Tabindex从表单开头的1开始 这是代码。也可以设置选项卡索引

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

对于如何解决此问题，有什么建议吗？

当日期选择器关闭时，您可能可以使用onClose事件将焦点返回到您的输入，因为它引用了该回调中的关联输入字段。例如：

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

订阅onClose或onSelect事件：

或在onClose的情况下：

---

让它关注同一个框最终会导致日期选择器弹出，我们真正想要的是让它进入下一个字段。以下是设计的解决方案：

需要在字段上设置tabindex属性。 这是在javascript*1中从字符串转换为int。 这实际上会将选定字段移动到下一个元素，而不是当前焦点

---

感谢您对这项技术的任何改进建议。

谢谢您的建议，Jeff，我修改了您的onSelect函数，使用属性过滤器仅检索具有nexttab指定的tabindex的元素

$(function(){
  $(".date").datepicker({
      onSelect: function(){
          currenttab = $(el).attr("tabindex");
          nexttab = currenttab * 1 + 1;
          $("[tabindex='" + nexttab + "']").focus();
      }
  });
});

附言： 如果您的代码中没有指定TabIndex，就像我之前忽略的那样，只需添加以下代码：

$('input, select').each(function(i, val){
    $(this).attr('tabindex', i + 1);
});

---

如果您真的不关心选项卡顺序，也就是说，没有分配它，因此它遵循页面的流程，您可以这样做

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

---

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

类似于Jimmy的方法，但这将焦点设置为日历图标，假设日历使用图标，当我身边有多个日期选择器时，我发现这种方式更合适

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

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

向日历图标添加标记，使其可聚焦：

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

---

有关此问题的讨论，请参阅 在

---

我也必须解决这个问题，发现给出的答案并不完全是我想要的。这就是我所做的

A提到了一个jQuery函数，它允许您选择屏幕上的下一个表单元素。我将其导入到我的项目中，并将其称为日期选择器对话框的onClose

如果链接失效，下面是函数

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

---

希望这对未来的访问者有所帮助。

按enter键后，我可以将焦点转到下一个输入字段。默认情况下，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) + ')')

---

我在datepicker输入控件旁边添加了一个空的href标记，并在onClose事件处理程序中关注它。这解决了我在日历关闭时焦点一直转移到页面顶部的问题。我正在使用href标记显示错误消息；因此，它对我来说有两个目的。

这两项工作都可以完成，但日历又会下降。有什么快速的解决方法吗？如果我能让它专注于下一个领域。。。onClose：函数{关注下一个字段}可以工作。有什么建议吗？-1：这会以一个问题换另一个问题，因为它会导致日历小部件重新出现。-1：这两个问题都不会导致焦点返回到Chrome 25上的输入字段。如果您的日历设置为“仅在按钮上弹出”showOn:按钮，则此解决方案工作正常@DanielAllenLangdon，这不会以一个问题换下一个问题，熟悉键盘的用户可以继续切换到下一个控件，日历将再次关闭。如果没有此解决方案，用户必须用鼠标手动聚焦下一个控件。基本上，此解决方案解决了用户必须重新关注选择日期的问题。另一种解决方案将焦点返回到输入字段，但修复了IE，使其不会重新打开日历：此特定解决方案仅在Chrome中对我有效-在IE中，我知道，我知道。。。这会导致一个日历弹出两次。-1：到今天为止，票证7266已经作为票证7765的副本关闭，但票证7765仍然是一个开放的错误，没有解决方案。调用焦点的想法在IE中是一个问题，日历会再次弹出。这会导致日历在IE中再次弹出。+1：我喜欢这种解决方案，因为在用户看来，焦点似乎仍然在他们单击的输入字段上，而不是将焦点移动到下一个字段，这不是预期的行为。这适用于Chrome 25、IE 9、Opera 12、Firefox 19和Safari 5。谢谢我添加图标就是为了使用这个解决方案。它保持选项卡顺序，而无需显式指定

---

. 谢谢有时tabindex等于nexttab的元素可能被隐藏或不可聚焦。您应该进行测试以确保$this可以获得焦点。

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

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