jQuery Mobile Phonegap iOS：当我拉起键盘时标题闪烁

Posted 2023-03-15

【中文标题】jQuery Mobile Phonegap iOS：当我拉起键盘时标题闪烁

【英文标题】：jQuery Mobile Phonegap iOS: Header flickers when I pull up keyboard

【发布时间】：2012-03-17 02:49:55

【问题描述】：

标题几乎概括了它。我有一个固定的持久标头：

<div data-role="header"  data-id="headerbar" data-position="fixed" data-theme="b">

            <h1>Title!</h1>  
            <a href="#" class="ui-btn-right">Login</a> 
        </div> 

然后通过另一个标题：

<div data-role="header"  data-theme="c">
        <h6>1. Type a name </h6> 
        <input type="search" name="name" id="basic" value=""></input>
    </div> 

当我在 xcode 模拟器（以及我的实际 iPhone）中单击文本输入时，第一个标题变为纯白色，然后轻弹回正确的标题。

想法？

我的屏幕是这样的：

【问题讨论】：

你打算在同一个页面中使用两个标题？

你能贴一下你的屏幕是什么样子的吗？

@JoshDG 你在这方面有什么进展吗？有一个类似的问题，即固定标题中的搜索输入会使标题在键盘出现/消失时闪烁。这不是破坏交易，但确实很烦人。

【参考方案1】：

您可以使用<label> 代替<header>

<label for="search-basic">Select Name:</label>
<input type="search" name="search" id="searc-basic" value="" data-mini="true" />

http://jsfiddle.net/6Vu4r/3/

编辑： 它是 jQuery Mobile 的 data-position="fixed" 属性的属性。它的作用是当滚动屏幕时它会消失工具栏。同样，如果你点击屏幕它会消失，如果你再次点击它会显示工具栏。所以这就是为什么如果您再次单击第一次，您的标题会消失，当您再次单击时，它会弹出回来。如果不使用，请删除该属性。希望对您有所帮助。

【讨论】：

这确实有助于我的格式化，但另一个标题（顶部）仍然闪烁。

请看我的编辑。你说“变成纯白色”并将其称为“闪烁效果”让我感到困惑。

嗯。那么这确实解决了问题，所以我接受了答案，但我确实希望它是一个固定的标题......我不希望它在我滚动时移动......我可以这样做吗？谢谢你的帮助顺便说一句:)

好吧，使用默认的data-role="header" & data-role="footer" 在这种情况下，页眉和页脚显示在顶部。 & 页脚位于页面内容（文本）的底部，但不在屏幕底部。我不知道我是否让你感到困惑。正如我所说，它始终取决于您的页面要求（您放入页面的 txt 的长度）。您需要在这方面稍加尝试才能很好地掌握事物。 :)

是的，我可能不明白你..虽然我肯定要玩更多才能掌握......我的意思是..我将它用作应用程序，所以我真的不想要标题与页面一起滚动......如果我不修复它会做什么......有没有办法让它在点击或滚动屏幕时不会消失固定栏？

【参考方案2】：

正如@uDay 所说，删除 data-position="fixed" 帮助我摆脱了 @uDay 的 EDIT 中提到的问题。 @JoshDG 在 div data-role="header" 您可以尝试 style="position:fixed" 如果您发现对齐方式有任何变化，请重新对齐，以使您的标题固定。 :) 感谢您的解决方案和问题。

【讨论】：

对我来说，当我删除数据位置并只放置样式时，对齐会丢失。所以，我离开了数据位置并放置了样式： ...

【参考方案3】：

不幸的是，这是 jQuery Mobile 的一个主要错误。有很多关于此的问题正在公开，它们将在下一个版本（至少 1.3.1）中设置里程碑。 https://github.com/jquery/jquery-mobile/issues/5532