Phonegap JQM 固定位置页眉/页脚在关闭 iOS 键盘后移动
Posted
技术标签:
【中文标题】Phonegap JQM 固定位置页眉/页脚在关闭 iOS 键盘后移动【英文标题】：Phonegap JQM Fixed Position Header/Footer Moves After Dismissing iOS Keyboard 【发布时间】：2012-02-18 00:49:28 【问题描述】：我正在尝试在 Phonegap 项目中使用 JQM 在 ios 应用程序中创建固定的页眉和页脚。我有一个使用可折叠 DIV 的页面，并且在 DIV 中有一个文本输入。在我展开 DIV 并在文本字段中输入一些内容之前，页眉和页脚一切都很好。一旦我关闭 iOS 键盘，页眉就会向上移动并被 iPhone 的“信息”栏覆盖，页脚也在页面上向上滑动，不再固定在底部。如果我在此之后展开另一个可折叠 DIV，页脚将移回正确的位置，但页眉仍然覆盖在屏幕顶部。有什么想法吗？
JQM 页面代码：
<div data-role="page" id="wizard_3">
<div data-role="header" class="header" data-id="cls_header">
<h1>
<label>Testing®</label>
testProgram®</h1>
</div>
<div data-role="content">
<div data-role="collapsible-set" id="ability_set">
<div data-role="collapsible" data-collapsed="true" id="abilQuestion1" class="collapsedAbilityQuestion">
<h3 id="abilQuestion1Header">XXXXXXX </h3>
<p id="abilQuestion1Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability1" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion2" class="collapsedAbilityQuestion">
<h3 id="abilQuestion2Header">XXXXXXX</h3>
<p id="abilQuestion2Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability2" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion3" class="collapsedAbilityQuestion">
<h3 id="abilQuestion3Header">XXXXXXX</h3>
<p id="abilQuestion3Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability3" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion4" class="collapsedAbilityQuestion">
<h3 id="abilQuestion4Header">XXXXXXX</h3>
<p id="abilQuestion4Textr">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability4" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestion5" class="collapsedAbilityQuestion">
<h3 id="abilQuestion5Header">XXXXXXX</h3>
<p id="abilQuestion5Text">XXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability5" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" id="abilQuestionn6" class="collapsedAbilityQuestion">
<h3 id="abilQuestion6Header">XXXXXXXX</h3>
<p id="abilQuestion6Text">XXXXXXXX</p>
<div data-role="fieldcontain" data-inline="true" class="ratingControls">
<fieldset data-role="controlgroup">
<input type="button" data-icon="arrow-l" data-iconpos="notext" data-inline="true"/>
<input type="text" id="ability6" class="assessNum" value="0"/>
<input type="button" data-icon="arrow-r" data-iconpos="notext" data-inline="true"/>
</fieldset>
</div>
</div>
</div>
</div>
<div id="footer" data-role="footer" data-position="fixed" class="ui-bar footer" data-theme="b"> <span class="leftButton">
<input type="button" class="leftButton" data-theme="b" data-icon="arrow-l" value="Back" onClick="goBack(2)"/>
</span> <span class="rightButton">
<input type="button" class="rightButton" id="wizardNextButton_3" data-theme="b" data-icon="arrow-r" value="Coninue to Step 3" onClick="javascript:wizardDecision(3, true); return false"/>
</span> </div>
</div>
【问题讨论】：
【参考方案1】：我有一个类似的问题，我用这个解决了：
/* iOS keyboard popup somehow leaves page scrolled, unscroll it */
$.mobile.silentScroll(0);
我在http://forum.jquery.com/topic/phonegap-jqm-fixed-position-header-footer-moves-after-dismissing-ios-keyboard找到了解决方案
【讨论】：
【参考方案2】：看看这个解决方案。
这被报告为 jQM 错误，但仍在 jQM 1.3.2 中。
试试这个对我有用的解决方案，取自下面提到的线程。
// Workaround for buggy header/footer fixed position when virtual keyboard is on/off
$('input, textarea')
.on('focus', function (e)
$('header, footer').css('position', 'absolute');
)
.on('blur', function (e)
$('header, footer').css('position', 'fixed');
//force page redraw to fix incorrectly positioned fixed elements
setTimeout( function()
window.scrollTo( $.mobile.window.scrollLeft(), $.mobile.window.scrollTop() );
, 20 );
);
此处发布了其他解决方案。这是一个值得一看的线程： https://github.com/jquery/jquery-mobile/issues/5532
【讨论】：
【参考方案3】：这是一个很难“正确”的问题。您可以尝试在输入元素焦点上隐藏页脚，并在模糊时显示，但这在 iOS 上并不总是可靠的。每隔一段时间（十分之一，例如，在我的 iPhone 4S 上），焦点事件似乎无法触发（或者可能存在竞争条件），并且页脚没有被隐藏。
经过反复试验，我想出了这个有趣的解决方案：
<head>
...various JS and CSS imports...
<script type="text/javascript">
document.write( '<style>#footervisibility:hidden@media(min-height:' + ($( window ).height() - 10) + 'px)#footervisibility:visible</style>' );
</script>
</head>
本质上：使用 JavaScript 确定设备的窗口高度，然后动态创建 CSS 媒体查询以在窗口高度缩小 10 像素时隐藏页脚。因为打开键盘会调整浏览器显示的大小，所以这在 iOS 上永远不会失败。因为它使用的是 CSS 引擎而不是 JavaScript，所以它也更快更流畅！
注意：我发现使用 'visibility:hidden' 的故障比 'display:none' 或 'position:static' 少，但您的里程可能会有所不同。
【讨论】：
【参考方案4】：我发现这个问题的最佳解决方案是使用这个插件： （输入模糊效果不太好）
ionic-plugins-keyboard
bindViewEvents: function ()
var context = this;
window.addEventListener('native.showkeyboard', context.keyboardShowHandler);
window.addEventListener('native.hidekeyboard', context.keyboardHideHandler);
,
keyboardHideHandler: function (e)
var context = this;
$(".ui-footer[data-role='footer']").show();
,
keyboardShowHandler: function (e)
var context = this;
$(".ui-footer[data-role='footer']").hide();
【讨论】：
【参考方案5】：我只是测试它，它有效。
$(document).on('focus','input', function()
setTimeout(function()
$('#footer1').css('position', 'absolute');
$('#header1').css('position', 'absolute');
, 0);
);
$(document).on('blur','input', function()
setTimeout(function()
$('#footer1').css('position', 'fixed');
$('#header1').css('position', 'fixed');
, 800);
);
【讨论】：
以上是关于Phonegap JQM 固定位置页眉/页脚在关闭 iOS 键盘后移动的主要内容，如果未能解决你的问题，请参考以下文章