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

I am using JQuery ui with datepicker and when a user tabs on to a field, they appropriately get the calendar pop up.

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

User tabs (via key onto field
用户标签（通过键到字段
User selects date with mouse click
用户通过鼠标单击选择日期
User tabs
用户标签
Tabindex starts over at one (at the beginning of form)
Tabindex从一开始（在表单的开头）

Here is code. (May also have the tab index set)

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

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

The jquery code is:

jquery代码是：

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

Any suggestions on how I might go about solving this issue (bonus to shortest solution)?

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

9 个解决方案

#1

Subscribe to the onClose or the onSelect event:

订阅onClose或onSelect事件：

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

Or in the case of onClose:

或者在onClose的情况下：

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

#2

See discussion about this problem at http://bugs.jqueryui.com/ticket/7266 with a solution at http://jsfiddle.net/lankarden/9FtnW/

有关此问题的讨论，请访问http://bugs.jqueryui.com/ticket/7266，并在http://jsfiddle.net/lankarden/9FtnW/上找到解决方案

#3

Thanks for the suggestion Jeff, I modified your onSelect function to use the attribute filter to retrieve only elements with the tabindex specified by "nexttab".

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

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

PS: If you don't have tabindexes specified in your code, like I neglected to do earlier, simply add the following code:

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

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

#4

Similar to Jimmy's approach, but this sets the focus to the calendar icon (assuming your calender uses an icon), I found this way more appropriate when I had multiple date pickers next to each other.

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

Set the date default options so that they set focus to the icon when the calendar popup closes:

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

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

Add a tag to the calendar icon so that it's focusable:

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

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

#5

If you really don't care about the tab order, that is, not having it assigned so it follows the flow of the page, you could do something like this.

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

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

It works on the assumption that when the user selects the date, he is finished with that field and moves on to the next one, so it simply selects the next field.

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

#6

You can probably use the onClose event to return focus to your input when the datepicker closes, as this refers to the associated input field in that callback. For example:

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

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

#7

Having it focus on the same box ultimately causes the date picker to pop back up and what we really want is for it to go to the next field. Here is teh devised solution:

让它专注于同一个盒子最终导致日期选择器重新弹出，我们真正想要的是它转到下一个字段。这是设计的解决方案：

Requires the tabindex attribute to be set on your fields.
需要在字段上设置tabindex属性。
This is casting from a string to int in javascript (the * 1).
这是在javascript（* 1）中从字符串转换为int。

This actually moves the selected field to the next element, instead of the current focus

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

$(function(){
  $(".date").datepicker({
      onSelect: function(){
          currenttab = $(this).attr("tabindex");
          nexttab = currenttab * 1 + 1;
          $(":input").each(function(){
              if ($(this).attr("tabindex") == nexttab)
                 $(this).focus();
          });
  }
  });
});

Any suggestions to improve on this technique are appreciated.

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

#8

I had to solve this problem as well and found that the given answers weren't exactly what I was looking for. Here is what I did.

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

A blog mentioned a jQuery function that would allow you to select the next form element on the screen. I imported that into my project and called it onClose of the datepicker dialog.

一篇博客提到了一个jQuery函数，它允许你选择屏幕上的下一个表单元素。我将它导入到我的项目中，并在datepicker对话框的onClose上调用它。

In case the link goes dead, here is the 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;
    });
};

Then simply called it onClose of the datepicker

然后简单地称它为on datepicker的onClose

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

Hope this helps future visitors.

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

#9

I was able to get the focus to the next input field after pressing enter (which selects todays date by default) or when clicking a date from the calendar by using this

按Enter键（默认选择今天的日期）或使用此日期单击日历中的日期后，我能够将焦点转到下一个输入字段

$(".jqDateField").datepicker('option', {
    dateFormat: 'mm/dd/y', onClose: function () {
        $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();
    }
});

This may be required to set focus on the next text input incase you have a select or an input button in the "way"

如果你在“方式”中有一个选择或输入按钮，可能需要将焦点设置在下一个文本输入上

$(':input[type="text"]:eq(' + ($(':input[type="text"]').index(this) + 1) + ')')

#1