Question

我有一个固定元素应该在屏幕中居中。我里面也有输入元素。应该如此，当输入被聚焦时，具有固定元素的整个页面四处移动。

但是，如果用户点击“Go”键或我创建的按钮隐藏整个固定元素并使输入模糊，下次当我尝试显示固定元素时，它仍然不合适（页面恢复正常）。它显示在屏幕底部滑动一半（即使没有输入被聚焦而键盘已关闭）。

任何帮助将不胜感激。我一直在拉我的头发。这是在PhoneGap项目中出现的，但我使用通过Mobile Safari查看的标准网站复制了该问题。

以下是我的一些代码：

<!--(HTML)-->

<div class="smooth-button" onclick="show()">Show</div>

<div id="popin">
<input type="text" placeholder="Example!" />
<div class="smooth-button" onclick="save()">Save</div>
</div>

... 


/* (CSS) */

#popin {
    position: fixed;
    left: 50%;
    top: 50%;
    height: 400px;
    width: 300px;
    margin-top: -200px;  /*keeps it perfectly centered*/
    margin-left: -150px; /*keeps it perfectly centered*/
} 

#smooth-button {
    /* make the div look like a cool button */
}

...

// (JavaScript)

function show() {
    $("#popin").css('display', 'block');
}

function save() {
    //code to save text
    $("#popin").css('display', 'none');
}

Answer 1

右侧边栏上的“相关”链接之一引导我进入此页面：

iOS 5 fixed positioning and virtual keyboard

我刚刚改变了答案，它完美无缺。现在，在输入模糊后调整主体大小然后向后移动它会使固定元素的位置更新。

$("input, textarea").live("blur", function(e) {
    setTimeout(function() {
        $("body").css("height", "+=1").css("height", "-=1");
    }, 0);
});

HTML：模糊不清的固定项目

1 个答案: