【问题标题】:touchSwipe messes with datepickertouchSwipe 与日期选择器混淆
【发布时间】:2013-06-20 10:32:37
【问题描述】:

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

当我没有选择日期时(并单击文本字段外的某个位置,日期选择器就会消失),我第二次选择输入字段时会出现一个选项字段。当我选择一个日期时,日期选择器不会再次显示。

我使用以下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 和 touchSwipe JS 文件,但我找不到与 datepicker 发生冲突的元素。

有人可以帮忙吗?

编辑这是一个实时版本。它仅针对移动设备进行了优化,因此您可能希望缩小浏览器(宽度)。 http://paulvandendool.nl/lab/test/

【问题讨论】:

  • 尝试$('#date').off('click').datepicker()解除之前的绑定
  • 没有帮助。无赖:(
  • 在原始问题中添加了实时版本。如果您最小化浏览器的宽度,它将看起来最好。由于使用了外部资源,因此无法使用小提琴。
  • 您使用哪种设备?在桌面上它工作正常
  • 无法在我的 iMac 上的 Chrome 和 Firefox 上运行。它在您第一次单击时有效,但在第二次时无效。但我注意到,当我点击其他地方时,输入字段并没有取消焦点。只有当我选择其他输入字段时,它才会聚焦。所以我在 github 问题上搜索了“焦点”并找到了这个:github.com/mattbryson/TouchSwipe-Jquery-Plugin/issues/29。添加提供的代码有效。为努力点赞。谢谢。

标签: javascript jquery datepicker


【解决方案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

【讨论】:

  • 但是你应该更新插件,显然它是固定的。而且我不喜欢狂野的$(input).blur(),太宽泛了
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-10-05
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-07-29
相关资源
最近更新 更多