5

テキストフィールドを入力するポップアップダイアログボックスが必要なアプリを作成しているので、 jqueryモバイルサイトから例を取り、国と市外局番を含む固定電話番号を挿入するために4つの入力テキストを挿入しました。エミュレーターで実行するとポップアップダイアログが開きますが、ユーザーがテキストボックスに何かを挿入しようとすると上にスクロールするため、スクリプトでこのコードを使用して、以下に示すようにページスクロールを無効にしました。残りのテキスト ボックスはキーボードの横に隠されているため、2 つのテキスト ボックスにのみデータを挿入します。私が望むのは、ユーザーのキーボードが開いているときにページが勝手にスクロールしてはならず、ユーザーがポップアップ ダイアログをスクロールしてデータを挿入できるようにすることです。返されたコードは次のとおりです。

ページを削除...

<div 
    data-role="popup" 
    id="popupDialog" 
    data-overlay-theme="a" 
    data-theme="c" 
    data-dismissible="false" 
    style="max-width:400px;"
    class="ui-corner-all"
>  
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Delete Page?</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
        <p>This action cannot be undone.</p>
        <input type='number' id='area code' placeholder='Area code'>
        <input type='number' id='country code' placeholder='Country code'>
        <input type='number' id='numder' placeholder='Number'>
        <input type='button' id='open' data-rel='back' value='OK'>
    </div>
</div>

ページのスクロールを無効にする JavaScript は次のとおりです。

$(document)
  .on('popupafteropen', '[data-role="popup"]', function (event, ui) {
    $('body').css('overflow', 'hidden');
  })
  .on('popupafterclose', '[data-role="popup"]', function (event, ui) {
    $('body').css('overflow', 'auto');
  });

前もって感謝します

4

0 に答える 0