jquery-ui - 使用 Jquery 的日期选择器在选择日期后失去对文本框的焦点。

Question

使用 Jquery 的日期选择器在选择日期后失去对文本框的焦点。我正在使用jquery-ui-1.9.2。选择日期后，焦点不介绍到textbox.ny解决方案？

Answer 1

尝试使用下面的代码。

HTML 代码：
<input type="text" id="date"/>

查询：

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

JSFiddle1

编辑：上面的代码在 IE 中有问题，日期选择器没有关闭。在此博客中，您可以找到更多信息。

<script language='javascript' src="jquery-migrate-1.2.1.js"></script> // download and add this

$("#date").datepicker({            
   /* fix buggy IE focus functionality */
   fixFocusIE: false,   
   onClose: function(dateText, inst) {
       this.fixFocusIE = true;
       this.focus();
   },
   beforeShow: function(input, inst) {
       var result = $.browser.msie ? !this.fixFocusIE : true;
       this.fixFocusIE = false;
       return result;
   }
}); 

JSFiddle2

Answer 2

   $(".datepicker").datepicker({
        onClose: function () {
            $(this).parents().nextAll().find($(":input[type !='hidden']")).first().focus();

        }
    });
});

我找到了一种更简单的方法，可以将焦点放在下一个输入上，无论它是多么嵌套。您始终可以将 .find 之后的条件换成您喜欢的任何内容，它会将焦点集中在该条件上。

Answer 3

初始化 Doc Ready 上的所有 datepcikers

Answer 4

    $('.datepicker').datepicker(
     {

      onClose: function () {

        this.focus();
      }
 });

Answer 5

扩展Praveen的答案。我有一个问题。在 IE 日期选择器上，我每次关注一个字段时都拒绝出现。

此外，该解决方案存在一个轻微的逻辑问题（它没有影响任何东西，但在我看来仍然不正确）：fixFocusIE 字段被设置在选项上，但后来它在“this”上被调用，当“this " 指的是 DOM 元素而不是选项对象。所以基本上有两个 fixFocusIE - 一个在选项中（未使用），第二个在 DOM 元素本身。

而且 $.browser.msie 也不再工作了，我不得不发明自己的 IE 检测器。

我的工作代码如下所示：

var el = $("selector of element I need to assign to datepicker");
var options = {}; // actually I fill options from defaults and do some other manipulations, but I left it as empty object here for brevity

options.fixFocusIE = false;

function detectIE() {
    var ua = window.navigator.userAgent;

    if(ua.indexOf('MSIE ') > 0 || 
       ua.indexOf('Trident/') > 0 || 
       ua.indexOf('Edge/') > 0) {

       return true;
    }

    // other browser
    return false;
}    

/* blur() and change() are needed to update Angular bindings, if any */
options.onSelect = function(dateText, inst) {
    options.fixFocusIE = true;
    $(this).blur().change().focus();
};
options.onClose = function(dateText, inst) {
    options.fixFocusIE = true;
    this.focus();
};
options.beforeShow = function(input, inst) {
    var result = detectIE() ? !options.fixFocusIE : true;
    options.fixFocusIE = false;
    return result;
};

/* and this one will reset fixFocusIE to prevent datepicker from refusing to show when focusing the field for second time in IE */
el.blur(function(){
    options.fixFocusIE = false;
});

el.datepicker(options);