twitter-bootstrap 选择后引导日期选择器返回焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28172785/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap datepicker return focus after select
提问by KyleMit
If you initialize a bootstrap datepicker from eternicodewith autoclose: true, two undesirable behaviors happen:
如果您初始化从eternicode引导日期选择器有autoclose: true两种不良行为发生：
- After the picker closes, when you tab into the next field, you'll start at the beginning of the document again. This can be quite cumbersome on long forms.
- Because the picker changes the value programatically, any listeners that you have that care about the blur event on the input won't behave properly. The blur actually occurs when you select the picker value and the input's value hasn't changed. Then the bootstrap-datepicker programmatically updates the field so blur is never fired with the new value.
- 选择器关闭后，当您按 Tab 键进入下一个字段时，您将再次从文档的开头开始。这在长表单上可能非常麻烦。
- 由于选择器以编程方式更改值，因此您关心输入上的模糊事件的任何侦听器都将无法正常运行。当您选择选择器值并且输入值未更改时，实际上会发生模糊。然后 bootstrap-datepicker 以编程方式更新该字段，因此不会使用新值触发模糊。
Here's a demo in stack snippets:
*select any field, select a value from the picker, and then hit Tab
这是堆栈片段中的演示：
*选择任何字段，从选择器中选择一个值，然后点击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/>According to the answer to Focus the field after selecting the jQuery UI datepicker, you can tap into the onCloseor onSelectevents, but the bootstrap picker doesn't offer those events.
根据选择 jQuery UI datepicker 后 Focus the field的答案，您可以点击onClose或onSelect事件，但引导程序选择器不提供这些事件。
Simply replacing them with hidedoesn'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.
简单地将它们替换为hide似乎也不起作用，因为重新聚焦将创建一个无限循环，无论何时您尝试关闭它，它始终保持打开状态。
$(".datepicker").datepicker({
autoclose: true
})
.on('hide', function () {
$(this).focus();
});
Stack Snippet Demo:
堆栈片段演示：
$(".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/>回答by KyleMit
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.
这有点像黑客工作，但您可以有条件地隐藏和显示元素以避免无限循环。在隐藏时，检查这是否是第一次尝试隐藏。如果输入没有焦点（意味着他们使用了下拉菜单并且我们失去了选项卡顺序，那么重新聚焦将导致选择器显示。我们也会捕捉到这个显示并从那里隐藏，重新输入我们的原始代码. 我们将在对象上来回传递一个属性，以便我们可以管理状态。
That will look like this:
看起来像这样：
$(".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 Demo:
堆栈片段演示：
$(".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/>回答by CalebC
I am trying to achieve the same thing but somehow the solution is a little buggy. For example, if you click the same date picker again, it is not responding. The browser will stop responding if you click multiple times. I have a better solution which is below.
我正在努力实现同样的目标，但不知何故，解决方案有点问题。例如，如果您再次单击同一个日期选择器，它就没有响应。如果您多次单击，浏览器将停止响应。我有一个更好的解决方案，如下所示。
My solution is to trick the datepicker to focus on the next element within the DIV. I have parsley validation, it adds the <UL>for me automatically.
我的解决方案是欺骗日期选择器专注于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();
});
回答by SantoshK
Current date selected features added with @KyleMit solutions
使用@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/>