JQuery-mobile，Phonegap，iOS，固定表头离开输入表单后跳转答案

【问题标题】：JQuery-mobile, Phonegap, iOS, fixed header jumps after leaving input formJQuery-mobile，Phonegap，iOS，固定表头离开输入表单后跳转
【发布时间】：2013-09-09 18:38:03
【问题描述】：

我在 iOS 上使用 Phonegap 和 JQuery-mobile，Phonegap。我在离开表单输入时遇到标题跳转到中间的问题。

我已经在固定页眉和页脚上设置了 data-hide-during-focus="true"。这个问题要了我的命。

【问题讨论】：

标签： ios jquery-mobile cordova

【解决方案1】：

如果我们只有一个标题栏，那么我们可以只按照主标题栏的代码。

    $(document).on('focus', 'select, input, textarea', function () {
        $('#main-headerbar').css({'position': 'absolute', 'top': '0px' });
    });
    $(document).on('blur', 'select, input, textarea', function () {
        $('#main-headerbar').css({ 'position': 'fixed' });
    });

如果我们有两个标题栏，第二个标题栏将显示在主标题栏下方（如果主标题栏的高度为 '47px'，则为第二个标题栏设置顶部样式，顶部：47 像素）。

$(document).on('focus', 'select, input, textarea', function () {
    $('#main-headerbar').css({'position': 'absolute', 'top': '0px' });
    $('#Second-headerbar').css({ 'position': 'absolute', 'top' : '0px' });
});
$(document).on('blur', 'select, input, textarea', function () {
    $('#main-headerbar').css({ 'position': 'fixed' });
    $('#Second-headerbar').css({ 'position': 'fixed', 'top': '47px' });
});

或关注iOS fix for position fixed elements on input

【讨论】：

我认为我的问题是因为我在可滚动的 div 中有表单，并且 div 是绝对位置。我尝试将div更改为固定位置，似乎跳转效果较小，但是当我按下下一个/上一个时，页脚仍然向上滚动。
非常适合我，我使用了相同的设置 user2412555。

【解决方案2】：

我在使用 1.0.1 时遇到了类似的问题，主要问题是在旧 2.3 版本的 android 甚至是 Google Nexus 手机中出现标题跳转。我已经在互联网上搜索了越来越多的东西，而不是经过一些研发后我意识到这基本上是 css 的错误下面我为解决它所做的工作

给每个页面的标题类“.header”
使用以下代码创建 css 类
.header{ border: 0px; position: fixed; width: 100%; top: 0px; left: 0px; z-index: 21; }

此外，如果您在更改页面后遇到标题跳下的任何问题，请添加此代码 $.mobile.silentScroll(0); in $("#yournextpageid").live("pageshow", function() { $.mobile.silentScroll(0); }

Jquery data-position="fixed" 所做的是将顶部位置动态添加到其标题中，并且它有开销并且在某些设备中被证明是非常粘的。此外，它会在打开键盘时跳入某些设备。添加上面的 CSS 将解决您的问题。

【讨论】：

【解决方案3】：

在 Config.xml 中将行更改为 false 它将解决您的问题..

【讨论】：

请具体说明。你换了什么线？
我给你投了反对票，因为你的回答没有提到要更改的行