引导日期选择器在选择后返回焦点 [英] Bootstrap datepicker return focus after select

问题描述

如果使用autoclose: true初始化eternicode的 bootstrap datepicker ，则会发生两种不良行为:

If you initialize a bootstrap datepicker from eternicode with autoclose: true, two undesirable behaviors happen:

1. 关闭选择器后，当您跳入下一个字段时，将再次从文档的开头开始.对于长格式，这可能会很麻烦.
2. 由于选择器会以编程方式更改值，因此您关心输入上的模糊事件的所有侦听器均无法正常运行.当您选择选择器值并且输入的值未更改时，实际上会发生模糊.然后，bootstrap-datepicker会以编程方式更新该字段，因此永远不会使用新值触发模糊.

以下是堆栈摘要中的演示:
*选择任何字段，从选择器中选择一个值，然后按 Tab

Here's a demo in stack snippets:
*select any field, select a value from the picker, and then hit 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日期选择器后的字段的答案，您可以点击onClose或onSelect事件，但引导选择器不提供这些事件.

According to the answer to Focus the field after selecting the jQuery UI datepicker, you can tap into the onClose or onSelect events, but the bootstrap picker doesn't offer those events.

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

Simply replacing them with hide doesn't seem to work either, since the refocusing will create an endless loop that always keeps the picker open any time you try to close it.

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

堆栈代码段演示:

$(".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/>

推荐答案

这是一点点黑客工作，但是您可以有条件地隐藏和显示元素以避免无限循环.隐藏时，检查这是否是第一次尝试隐藏.如果输入没有焦点(这意味着他们已经使用下拉菜单并且我们丢失了制表符顺序，那么重新聚焦将使选择器显示出来.我们还将捕获该显示并从那里隐藏起来，返回到原始代码中)我们将在对象上来回传递属性，以便我们管理状态.

This is a little bit of a hack job, but you can conditionally hide and show the elements to avoid an infinite loop. On hide, check if this is the first time attempting to hide. If the input does not have focus (meaning they have used the dropdown and we've lost our tab order, then refocusing will cause the picker to show. We'll also catch this show and hide from there, entering back into our original code. We'll pass back and forth a property on the object so we can manage state.

它看起来像这样:

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

堆栈代码段演示:

$(".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/>

这篇关于引导日期选择器在选择后返回焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！