次の 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 で同じように繰り返されることです。
これでどんな種類の助けもいただければ幸いです。