0

我有一个带有用于 Twitter Bootstrap 的 Jquery datepicker 的输入字段（这个），在我的应用程序中，我还使用了 touchSwipe（这个）。由于某种原因，两者不能一起工作。发生以下情况：当我第一次在输入字段内单击时，显示日期选择器。 日期选择器

当我不选择日期时（并单击文本字段外的某处使日期选择器消失），我第二次选择输入字段时会出现一个选项字段。当我选择一个日期时，日期选择器不会第二次显示。

选项字段

我使用以下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 和 touchSwipe JS 文件，但我找不到与 datepicker 相关的元素。

有人可以帮忙吗？

编辑这里是一个现场版本。它仅针对移动设备进行了优化，因此您可能希望缩小浏览器（宽度）。 http://paulvanendool.nl/lab/test/

4

1 回答 1

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

于 2013-06-20T12:10:16.327 回答