我有一个带有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' });
现在,为了创建流畅的用户体验,我希望在填充一个输入后选择表单中的下一个输入。具体来说,这意味着:
为了解决此问题,我已将此代码添加到我的页面
$('#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关联的日期选择器会消失? 但是,更重要的是,我怎样才能实现理想的行为?
答案 0 :(得分:3)
试试这个
$('#dateBegin').change(function(){
setTimeout(function (){
$("#dateEnd").focus();
}, 1);
});
我认为发生的事情是,在将焦点设置到下一个文本框后,日历仍然认为需要关闭。通过延迟焦点更改,您可以在jQuery UI响应单击后更改焦点。