我有以下 jQuery 移动页面:
<div id="performMeasurementPage" data-role="page">
<div data-role="header" role="banner" data-position="fixed" data-theme="b">
<h1>Measurement</h1>
<a data-role="button" data-direction="reverse" data-rel="back" href="" data-icon="arrow-l" data-iconpos="left">Care Plan </a>
</div>
<div data-role="content">
<div data-content-theme="d">
<form id="measurementForm" action="#performMeasurementPage">
<h3>Blood Pressure</h3>
<label for="systolic"><em>* </em>Systolic:</label>
<input type="number" name="systolic" id="systolic" />
<label for="diastolic">Diastolic:</label>
<input type="number" name="diastolic" id="diastolic" />
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<h3>Temperature:</h3>
</div>
<div class="ui-block-b">
<input type="number" name="temperature" id="temperature" data-theme="b"></input>
</div>
</fieldset>
<div data-role="fieldcontain">
<label for="slider">
<h3>Weight:</h3>
</label>
<input type="range" name="slider" id="slider" value="50" min="50" max="300" />
</div>
<button id="doneMeasurement" type="button" data-theme="b">Done</button>
</form>
</div>
</div>
<div data-role="footer" class="ui-frame ui-frame-footer" id="footer" data-position="fixed" data-theme="b">
<h1> Footer </h1>
</div>
</div>
此页面的 javascript 仅分配文本框的单击事件和验证。现在,除非我专注于任何一个文本框,否则内容滚动得很好。键盘弹出并按“完成”后,内容无法再滚动,并将页面捕捉到顶部。
此外,需要注意的是,这种行为在 Android 和 iOS 中都会重复出现。
我将不胜感激任何类型的帮助。