选择后引导日期选择器返回焦点

Posted 2023-05-07

【中文标题】选择后引导日期选择器返回焦点

【英文标题】：Bootstrap datepicker return focus after select

【发布时间】：2015-03-26 04:53:31

【问题描述】：

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

选择器关闭后，当您进入下一个字段时，您将再次从文档的开头开始。这在长表单上可能非常麻烦。 因为选择器以编程方式更改值，所以您关心的输入上的模糊事件的任何侦听器都不会正常运行。当您选择选择器值并且输入的值没有更改时，实际上会发生模糊。然后 bootstrap-datepicker 以编程方式更新该字段，因此永远不会使用新值触发模糊。

这是堆栈 sn-ps 中的演示： *选择任何字段，从选择器中选择一个值，然后点击 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/>

根据Focus the field after selecting the jQuery UI datepicker的回答，你可以点击onClose或onSelect事件，但是bootstrap picker doesn't offer those events。

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

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

【参考方案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'); 
  
)

堆栈片段演示：

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

【讨论】：

很好的修复！对于那些需要将 datepicker 类放在 div 输入组中的人，而不是输入本身，例如为了显示字形日历，调整上面的.on('hide', function () var elem = $(this).find('input'); if (!this.firstHide) if (!elem.is(":focus")) this.firstHide = true; // this will inadvertently call show (we're trying to hide!)elem.focus();

【参考方案2】：

我正在尝试实现相同的目标，但不知何故，解决方案有点问题。例如，如果您再次单击相同的日期选择器，它不会响应。如果您单击多次，浏览器将停止响应。我有一个更好的解决方案，如下所示。

我的解决方案是欺骗日期选择器，使其专注于DIV 中的下一个元素。我有欧芹验证，它会自动为我添加<UL>。

<div>   
<input type="text" class="datepicker" />
<ul class="error-message"></ul>
</div>

$('.datepicker').datepicker(
        autoclose: true
    ).on('hide', function () 
        $(this).next('ul').attr('tabindex',-1).focus();
    );

【参考方案3】：

@KyleMit 解决方案添加的当前日期选择功能

var date = new Date();
  var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
  var end = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$(".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('setDate', today);

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