在更改

Question

我有一个带有3个输入的简单html表单

<input id="dateBegin" type="text"  placeholder="Begin">

<input id="dateEnd" type="text" placeholder="End">

<input id="datePrice" type="text"  placeholder="Ex. : 220.00">

在前两个，我添加了一个日期选择器

$("#dateBegin").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });
$("#dateEnd").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });

现在，为了创建流畅的用户体验，我希望在填充一个输入后选择表单中的下一个输入。具体来说，这意味着：

1. [用户点击第一个输入（dateBegin）] - ＆gt;显示日期选择器。
2. [用户选择带有日期选择器的日期] - ＆gt; dateBegin填充了日期值，隐藏了与dateBegin链接的datepicker，下一个输入（dateEnd）被聚焦，并显示了其datepicker。
3. [用户使用第二个日期选择器选择日期] - ＆gt; dateEnd用日期值填充，链接到dateEnd的datepicker被隐藏，下一个输入（datePrice）被聚焦。

为了解决此问题，我已将此代码添加到我的页面

$('#dateEnd').change(function(){
    $("#datePrice").focus();

});
$('#dateBegin').change(function(){
    $("#dateEnd").focus();
    $("#dateEnd").datepicker("show"); // This line can be removed it doesn't change anything but I've tried it :p
});

我的问题出在第2步）。链接到dateEnd的datepicker会在消失之前短暂出现。可能不太清楚所以这里有JSFiddle再现它。

我无法弄清楚为什么与dateEnd关联的日期选择器会消失？ 但是，更重要的是，我怎样才能实现理想的行为？

Answer 1

试试这个

$('#dateBegin').change(function(){
    setTimeout(function (){
            $("#dateEnd").focus();
        }, 1);
});

我认为发生的事情是，在将焦点设置到下一个文本框后，日历仍然认为需要关闭。通过延迟焦点更改，您可以在jQuery UI响应单击后更改焦点。