单击ios“上一个”和“下一个”按钮时JQuery标题移动位置

Posted 2023-03-15

【中文标题】单击ios“上一个”和“下一个”按钮时JQuery标题移动位置

【英文标题】：JQuery header moves position when clicking ios "previous" & "Next" buttons

【发布时间】：2012-05-08 08:16:22

【问题描述】：

我使用 JQuery 1.1.0 和 Phonegap 构建了一个应用程序。我现在遇到的问题是，当我在字段中输入文本并点击 ios 键盘的“上一个”和“下一个”按钮时，标题会暂时从其固定位置移动并出现在页面上的不同位置。我必须补充一点，它也不一致，因为它不会在其他页面上这样做。标题被标记为固定，所以我不知道为什么它们有时会出现，有时不会。

多页的这一部分是“大部分时间”工作的页面示例，但有时当我在字段之间导航时，标题会滑出屏幕。

<div data-role="page" id="accident_detail" data-theme="f">
    <div data-role="header" data-position="fixed">
        <a href="#accident_insured" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
        <h1>Description</h1>
        <a href="#accident_vehicle" data-icon="arrow-r" data-iconpos="notext"></a>
    </div>
    <div data-role="content">
        <label for="incident_date">Date of Incident:</label>
        <input type="date" name="incident_date" id="incident_date" value="" class="required"/>
        <label for="incident_description">Description of Incident:</label>
        <textarea cols="40" rows="8" name="incident_description" id="incident_description" class="required"></textarea>
        <label for="accident_damage">Damage description:</label>
        <textarea cols="40" rows="8" name="accident_damage" id="accident_damage"></textarea>
        <label for="location_street">Street:</label>
        <input type="text" name="location_street" id="location_street" value="" class="required"/>
        <label for="location_city">City:</label>
        <input type="text" name="location_city" id="location_city" value="" class="required"/></div>
    <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
        <a href="#accident_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
           style="margin-left: 10px; margin-top: 5px">Done</a>
        <a href="index.html" rel="external" data-icon="home" data-direction="reverse" data-iconpos="notext"
           style="float: right; margin-right: 10px; margin-top: 5px"></a>
    </div>
</div>

任何帮助将不胜感激。

【问题讨论】：

我也遇到了类似的情况，这篇文章有更新吗？

我设法通过从 HTML 中的“标题”中删除 data-position="fixed" 属性并改用 CSS“hack”来解决此问题。 .header 位置：固定； z指数：10；顶部：0；宽度：100%;

【参考方案1】：

你可以试试这个..

<div data-role="page" id="myPage">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
    <a data-icon="back" data-transition="none">Back</a>
    <h1>PAGE TITLE</h1>
</div>
</div>