我有一个带有用于Twitter Bootstrap(this one)的Jquery日期选择器的输入字段,在我的应用程序中我也使用touchSwipe(this)。由于某种原因,这两个人不能一起工作。发生以下情况: 当我第一次在输入字段内单击时,datepicker显示。
当我没有选择日期(并单击文本字段之外的某处以使日期选择器消失)时,第二次选择输入字段时会出现一个选项字段。当我选择日期时,日期选择器不再显示。
我使用以下JS:
// Enable touchSwipe
$(window).ready(function () {
$('#form').swipe({
swipeLeft: function(event, direction, distance, duration, fingerCount) {
if($(window).width() < 751) {
$('#daycalendar').animate({
right: '0%'
}, 250);
} else {
// absolutely nothing
}
},
swipeRight: function(event, direction, distance, duration, fingerCount) {
if($(window).width() < 751) {
$('#daycalendar').animate({
right: '-80%'
}, 250);
} else {
// absolutely nothing
}
},
threshold: 0
});
});
// Call datepicker
$('#date').datepicker();
当我删除touchSwipe JS导入脚本或上面代码中的所有内容(最后两行除外)时,datepicker可以正常工作。
当我第一次选择不同的输入字段然后再次单击日期输入字段时,datepicker也可以工作。
我已经浏览了datepicker和touchSwipe JS文件,但我找不到与datepicker搞砸的元素。
有人可以帮忙吗?
修改这是一个实时版本。它仅针对移动设备进行了优化,因此您可能希望扩展浏览器(宽度)。 http://paulvandendool.nl/lab/test/
答案 0 :(得分:1)
我注意到输入字段如何保持聚焦,即使我点击它之外。将以下代码添加到swipe
函数中:
swipeStatus:function(event, phase, direction, distance, fingerCount) {
if ( phase == "move" || phase == "start" ) {
var $target = event.target.nodeName;
if( $target.toLowerCase() === 'input' ) {
return false;
} else {
$('input').blur();
}
}
},
https://github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/29