javascript - Why do div get scrolled when input is selected in tizen? -

i have tizen web application has multiple input field. when user clicks on input div scrolls bottom , input drawers comes up. user can't see input field. how prevent this?

i tried using this:

$('input').bind('focusin focus', function(e){     e.preventdefault(); }); 

it doesn't work.

edit: here sample part:

<div class="ui-page" id="">     <div class="ui-header">         <h1 class="ui-title">header</h1>     </div>      <div class="ui-content" id="history">         <ul data-role="listview">             <li><span>input 1:</span>             </li>             <li>                 <input type="tel" id="input1" style="background-color: #d1d1d1;">             </li>             <li><span>input 2:</span>             </li>             <li>                 <input type="number" id="input2" style="background-color: #d1d1d1;">             </li>              <li><span>input 3</span>             </li>             <li>                 <input type="number" id="input3" style="background-color: #d1d1d1;">             </li>         </ul>          <input class="ui-btn" type="button" onclick="done_click()" value="done">     </div>  </div> 

try this

the following code autoscroll input on focus.

$('input').bind('focusin focus', function(e){     var $input = $(this);     $('html,body').stop().animate({ scrolltop: $input.offset().top } , '500', 'swing'); }); 

i set offset - 25, provide visibility , creates space on top. may adjust way later.

if not work, try setting timeout: eg.

$('input').bind('focusin focus', function(e){     var $input = $(this);     settimeout(function(){         $('html,body').stop().animate({ scrolltop: $input.offset().top } , '500', 'swing');     }, 345); });