所以当谈到 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>