javascript - Eternicode Bootstrap 日期选择器在触摸 Android Webkit< 534 后选择输入

Question

在现有的 Android 浏览器上，User Agent 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 日期选择器仍然是一个问题，因为默认情况下日期选择器 float 到元素，因此重叠输入并导致选择落后问题。

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

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

Answer 1

解决方法

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

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;}