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

JQuery UI Datepicker loses focus when selecting date with mouse

提问by Jeff Ancel

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

我将 JQuery ui 与 datepicker 一起使用，当用户选择某个字段时，他们会适当地弹出日历。

1. User tabs (via key onto field
2. User selects date with mouse click
3. User tabs
4. Tabindex starts over at one (at the beginning of form)

1. 用户选项卡（通过键到字段
2. 用户点击鼠标选择日期
3. 用户标签
4. Tabindex 从 1 开始（在表单的开头）

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)?

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

回答by cllpse

Subscribe to the onCloseor the onSelectevent:

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

回答by Dave Carmean

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

在http://bugs.jqueryui.com/ticket/7266上看到关于这个问题的讨论， 在http://jsfiddle.net/lankarden/9FtnW/有一个解决方案

回答by johnnynotsolucky

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：如果您的代码中没有指定 tabindexes，就像我之前忽略的那样，只需添加以下代码：

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

回答by Oli B

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","#"));
    });

回答by Jimmy Stenke

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.

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

回答by Brian Dishaw

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 blogmentioned 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

然后简单地调用它 onClose of the datepicker

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

Hope this helps future visitors.

希望这对未来的游客有所帮助。

回答by AdamRoof

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

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

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

回答by Aamir

I have added an empty href tag next to the datepicker input control and focus onto it in the onClose event handler. This solved my problem of the focus shifting all the way to the top of the page when the calendar was closed. I am using that href tag to display error messages; therefore it serves two purposes for me.

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

回答by Adam Bellaire

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

onClose当日期选择器关闭时，您可能可以使用该事件将焦点返回到您的输入，就像this该回调中的关联输入字段一样。例如：

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

回答by Jeff Ancel

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:

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

1. Requires the tabindex attribute to be set on your fields.
2. This is casting from a string to int in javascript (the * 1).

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

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

Any suggestions to improve on this technique are appreciated.

任何改进这项技术的建议表示赞赏。