1

我有一个固定的元素，它应该在屏幕中居中。我里面也有输入元素。正如它应该的那样，当输入被关注时，带有固定元素的整个页面会移动。

但是，如果用户点击“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');
}
4

1 回答 1

1

右侧边栏中的“相关”链接之一将我带到此页面：

iOS 5 固定定位和虚拟键盘

我只是稍微更改了答案，并且效果很好。现在，调整主体的大小，然后在输入模糊后立即将其移回，从而更新固定元素的位置。

$("input, textarea").live("blur", function(e) {
    setTimeout(function() {
        $("body").css("height", "+=1").css("height", "-=1");
    }, 0);
});
于 2013-02-17T23:49:17.083 回答