选择后,Bootstrap datepicker返回焦点

Question

如果您初始化从eternicode引导日期选择器有autoclose: true两种不良行为发生:

1. 选择器关闭后,当您切换到下一个字段时,您将再次从文档的开头开始.这在长形式上可能非常麻烦.
2. 由于选择器以编程方式更改值,因此任何关注输入上的blur事件的侦听器都将无法正常运行.当您选择选择器值并且输入值未更改时,实际上会出现模糊.然后bootstrap-datepicker以编程方式更新字段,因此永远不会使用新值触发模糊.

这是堆栈片段中的演示:
*选择任何字段,从选择器中选择一个值,然后点击Tab

$(".datepicker").datepicker({
  autoclose: true
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>

根据选择jQuery UI datepicker后对Focus字段的回答,您可以使用onClose或者onSelect事件,但引导选择器不提供这些事件.

简单地替换它们hide似乎也不起作用,因为重新聚焦将创建无限循环,在您尝试关闭它时始终保持选择器打开.

$(".datepicker").datepicker({
  autoclose: true
})
.on('hide', function () {
  $(this).focus();
});

Stack Snippet演示:

$(".datepicker").datepicker({
  autoclose: true
})
.on('hide', function () {
  $(this).focus();
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>

Answer 1

这是一个黑客工作,但你可以有条件地隐藏和显示元素,以避免无限循环.在隐藏时,检查这是否是第一次尝试隐藏.如果输入没有焦点(意味着他们已经使用了下拉菜单并且我们丢失了Tab键顺序,那么重新聚焦将导致选择器显示.我们也将捕获此节目并从那里隐藏,返回到我们的原始代码我们将在物体上来回传递属性,以便我们可以管理状态.

这将是这样的:

$(".datepicker").datepicker({
  autoclose: true
})
.on('hide', function () {
  if (!this.firstHide) {
    if (!$(this).is(":focus")) {
      this.firstHide = true;
      // this will inadvertently call show (we're trying to hide!)
      this.focus(); 
    }
  } else {
    this.firstHide = false;
  }
})
.on('show', function () {
  if (this.firstHide) {
    // careful, we have an infinite loop!
    $(this).datepicker('hide'); 
  }
})

Stack Snippet演示:

$(".datepicker").datepicker({
  autoclose: true
})
.on('hide', function () {
  if (!this.firstHide) {
    if (!$(this).is(":focus")) {
      this.firstHide = true;
      // this will inadvertently call show (we're trying to hide!)
      this.focus(); 
    }
  } else {
    this.firstHide = false;
  }
})
.on('show', function () {
  if (this.firstHide) {
    // careful, we have an infinite loop!
    $(this).datepicker('hide'); 
  }
})

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>


<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>
<input type="text" class="datepicker" /><br/>