0

在此处输入图像描述所以当谈到 Jquery Mobile 开发时,我是一个真正的新手,我想知道是否有人可以帮助我理解 JQM 库的一个小方面。

我的问题与页面内容和 iOS 键盘有关。我有几页内容大小不一。例如,在一个页面上我有五个输入字段,而下一页我只有四个。当我使用 iOS 的“下一步”按钮在不同字段之间导航并最终到达最后一个字段时,页脚会自动出现在键盘上方,这正是我所需要的。

但是,在只有四个输入字段的下一页上,当我使用“下一步”按钮在字段之间导航并最终到达最后一个字段时,页脚不会直接出现在键盘上方,而是出现在上面,一旦键盘消失,最后一个输入字段和页脚之间就会产生一个空白。

任何想法为什么会发生这种情况?我猜它与页面内容有关,但我不确定。我附上了一张图片,向您展示停用键盘时会发生什么。

<div data-role="page" data-theme="f" id="some id">
        <div data-role="header">
            <a href="#some href" data-icon="arrow-l" data-direction="reverse" data-iconpos="notext"></a>
            <h1>Text</h1>
            <a href="#some href" data-icon="arrow-r" data-iconpos="notext"></a>
        </div>
<div data-role="content">
        <label for="some label">Text</label>
        <select name="some name" id="some id">
            <option value="Default">Select </option>
            <option value="Male">Male</option>
            <option value="Female">Female</option>
        </select>
        <label for="some label">Text:</label>
        <select name="some name" id="some id">
            <option value="Default">Select  Status</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
            <option value="Some value">Text</option>
        </select>
        <label for="some label">Text (YYYY-MM-DD):</label>
        <input type="date" name="some name" id="some id" value="" class="required"/>
        <label for="some label">Text (YYYY-MM-DD):</label>
        <input type="date" name="some name" id="some id value="" class="required"/>

    </div>
    <div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height: 42px;">
        <a href="#some href" data-icon="arrow-l" data-direction="reverse" data-iconpos="left" style="margin-left: 10px; margin-top: 5px">Done</a>
        <a href="#main_menu" data-icon="home" data-direction="reverse" data-iconpos="notext" style="float: right; margin-right: 10px; margin-top: 5px"></a>
    </div>
</div>
4

1 回答 1

0

这看起来与iOS6、UIWebView 和 position:fixed密切相关- 与您实际希望页脚移动不完全相同,但可能与高度更新的时间有关。

您可能可以通过覆盖 jquery mobile 从 javascript 所做的位置更改来解决此问题。该脚本在那里是因为 jquery mobile 还支持不原生处理固定定位的旧版浏览器。如果只需要支持最新版本的iOS,使用纯CSS可以获得更好的效果。

于 2012-11-16T05:33:47.133 回答