HTML :blur 将固定项目弄错[重复]

Posted 2023-02-25

【中文标题】HTML :blur 将固定项目弄错[重复]

【英文标题】：HTML :blur knocking fixed items out of place [duplicate]

【发布时间】：2013-02-17 23:38:10

【问题描述】：

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

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

【问题讨论】：

这是 Mobile Safari 还是其他地方的问题？

对不起。添加了详细信息。谢谢

你能发布你的代码吗？

【参考方案1】：

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

ios 5 fixed positioning and virtual keyboard

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

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