How to prevent auto scrolling when keyboard appears in jquery mobile popup-dialog

Question

I'm creating an app in which I want a popup dialog box with some text field to be entered so I took an example from the jquery mobile site and just inserted 4 input text to insert landline no with country and area code. When I run it on the emulator it opens up popup dialog but when user tries to insert something on the text box it scrolls above so I used this code in the script to disable page scroll as given below after this the problem is user is able to insert data on only 2 text box because rest of the text box are hidden beside the keyboard. What I want is page should not scroll on its own when user keyboard is open and user should be able to scroll the popup dialog to insert the data. here is the code that I had return:

Delete page...

<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>

here is the javascript to disable the page scroll:

$(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');
  });

Thanks in advance