Eternicode Bootstrap datepicker在触摸Android Webkit < 534上选择输入

【问题标题】：Eternicode Bootstrap datepicker selecting input behind on touch Android Webkit< 534Eternicode Bootstrap datepicker在触摸Android Webkit < 534上选择输入
【发布时间】：2013-08-27 16:41:59
【问题描述】：

在现有的 Android 浏览器上，用户代理 Mozilla/5.0 (Linux; U; Android 2.3.4; en-gb; imx53_nitrogen Build/R10.3.2_3) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari /533.1，Bootstrap 弹出框“触摸”将被绕过到弹出框后面启用的输入元素。我通过生成相对于触发元素的通用 Bootstrap 弹出框来解决此问题，这样弹出框后面就不会出现任何元素。但是，eternicode datepicker 仍然是一个问题，因为默认情况下 datepicker 浮动到元素，因此重叠输入并导致选择隐藏问题。

例如。当 August 被“触摸”时，它将选择弹出框后面以蓝色突出显示的输入

关于如何解决此行为的任何想法？

【问题讨论】：

标签： javascript html css twitter-bootstrap datepicker

【解决方案1】：

解决方法

扩展了 datepicker javascript 以注入相对于源元素的 datepicker。这会将周围的元素推离日期选择器，从而消除选择问题

Javascript 片段

 if (this.element.hasClass('datepicker-relative')) { //relative datepicker
                this.isRelative = true;
            }

构建

if (this.isInline) {
        this.picker.addClass('datepicker-inline').appendTo(this.element);
    } else if (this.isRelative) {
        this.picker.addClass('datepicker-relative datepicker-dropdown dropdown-menu').appendTo(this.element.parent());
    } else {
        this.picker.addClass('datepicker-dropdown dropdown-menu');
    }

CSS

.datepicker-relative{
position: relative;
top: 0;left: 0;right: 0;bottom: 0;
font-size: 14px;}

【讨论】：