Question

我正在使用带有datepicker的JQuery ui，当用户选中某个字段时，他们会适当地弹出日历。

用户标签（通过键到字段
用户点击鼠标选择日期
用户标签
Tabindex从一开始（在表单开头）

这是代码。（也可以设置标签索引）

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

jquery代码是：

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

关于如何解决这个问题的任何建议（最短解决方案的奖励）？

Answer 1

订阅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();
    }
});

Answer 2

感谢Jeff的建议，我修改了你的onSelect函数，使用属性过滤器只检索带有“nexttab”指定的tabindex的元素。

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

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

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

Answer 3

请参阅有关此问题的讨论 http://bugs.jqueryui.com/ticket/7266 解决方案 http://jsfiddle.net/lankarden/9FtnW/

Answer 4

与Jimmy的方法类似，但这会将焦点设置为日历图标（假设您的日历使用图标），当我有多个日期选择器彼此相邻时，我发现这种方式更合适。

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

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

将标记添加到日历图标，使其可以聚焦：

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

Answer 5

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

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

它假设当用户选择日期时，他已完成该字段并继续前进到下一个字段，因此它只是选择下一个字段。

Answer 6

当datepicker关闭时，您可以使用onClose事件将焦点返回到输入，因为this指的是该回调中的关联输入字段。例如：

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

Answer 7

将焦点放在同一个盒子上最终会导致日期选择器弹回，我们真正想要的是它转到下一个字段。这是设计的解决方案：

需要在字段上设置tabindex属性。
这是在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();
          });
  }
  });
});

任何改进此技术的建议都值得赞赏。

Answer 8

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

A blog提到了一个jQuery函数，允许您选择屏幕上的下一个表单元素。我将它导入到我的项目中，并在datepicker对话框的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;
    });
};

然后简单地将它命名为onpose of the datepicker

$(this).datepicker({
    onClose: function () {
       $(this).focusNextInputField();
    }
});

希望这有助于未来的访客。

Answer 9

按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) + ')')

Answer 10

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

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

10 个答案: