JQM 焦点文本字段将固定页脚移动到列表视图的底部答案

【问题标题】：JQM focus textfield moves fixed footer to the bottom of the listviewJQM 焦点文本字段将固定页脚移动到列表视图的底部
【发布时间】：2013-09-02 14:29:56
【问题描述】：

我有一个使用固定页眉和页脚的 jqm/phonegap 应用程序。当我聚焦一个文本框时，页脚被删除并且键盘弹出。

是否可以阻止页脚在焦点上被移除？

编辑：我读过屏幕宽度设置隐藏或显示工具栏（用于平板电脑支持）。是否可以始终设置页眉和页脚。无论屏幕尺寸如何。

这是我使用的一个页面示例（我使用 ajax 分页）：

<html>
<body>
    <div data-role="page" id="myPage" data-theme="a">
        <div data-role="header" data-tap-toggle="false" data-theme="a" data-position="fixed">
            <h1 id="myHeader"></h1>
        </div>

            <div data-role="content">
                <ul data-role="listview" id="lstvw_Items" data-filter-theme="a" data-filter="true"></ul>
        </div>
        <div data-role="footer" data-tap-toggle="false" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="index.html" data-icon="home"></a></li>
                    <li><a href="2.html" data-icon="grid"></a></li>
                    <li><a href="3.html" data-icon="info"></label></a></li>
                    <li><a href="4.html" data-icon="gear"><label></label></a></li>
                </ul>
            </div>
        </div>
    </div>
</body>
 </html>

listview get 填充了 ajax，可以使用 data-filter 进行过滤。如果我按下 datafilter txtbox，页脚将被删除，当我关闭键盘时，页脚位于页面底部。（屏幕外）。

此外，当有一个焦点字段并按下一个链接时，页面会闪烁，而当没有焦点时，它不会发生。

首先我使用 iSCroll 来保留固定的页眉和页脚，但这会产生很多其他问题。（使用键盘输入、性能...）

额外信息：

我正在使用

jqm 1.3.1
phonegap 2.9.0
目前在 android 2.3.x 及更高版本上测试

编辑：我已经弄清楚为什么按下回车键时焦点永远不会丢失。应用程序阻止输入键行为以防止表单提交。像这样：

    document.onkeypress = stopRKey;
    function stopRKey(evt){
       var evt = (evt) ? evt: ((event) ? event: null);
       var node = (evt.target) ? evt.target:((evt.srcElement) ? evt.srcElement:null);
       if((evt.keyCode == 13) && (node.type=='text')){node.blur();return false;}

}

我现在在这个函数的 if 原因中使用 node.blur();。但这仍然会导致闪烁。

【问题讨论】：

标签： jquery-mobile cordova jquery-mobile-listview

【解决方案1】：

我升级到 jqm 1.3.2 并修改了 hideduringfocus 的代码。

第 9905 行：

    $.widget( "mobile.fixedtoolbar", $.mobile.widget, {
    options: {
        visibleOnPageShow: true,
        disablePageZoom: true,
        transition: "none", //can be none, fade, slide (slide maps to slideup or slidedown)
        fullscreen: false,
        tapToggle: false,
        tapToggleBlacklist: "a, button, input, select, textarea, .ui-header-fixed, .ui-footer-fixed, .ui-popup, .ui-panel, .ui-panel-dismiss-open",
        hideDuringFocus: "",...

这似乎在 android 上运行良好，并且该栏已停止闪烁。如果您知道不需要修改 jquery 的更好答案，请发布！

【讨论】：