Preventing page from scrolling on focus switching

Question

I am new to mobile web/dev. My app is using jquery-mobile, phonegap and Compass (scss).

I have a problem on my login page :

logo and fields are contained in standard 'div' containers (data-role="content" data-type="vertical"). Background is colored.

when switching focus from login field to password field, the page slides up, which is what I don-t want to occur. I would like my logo and fields to stay in place, just like the Skype iOS App login page.

here is what happens :

I have tried several tricks, trying to block scroll events, or forcing page to scroll to 0,0, without success.

I am thinking about a new strategy now, maybe using top relative positioning for logo and fields, and catching focus events to scroll the page myself, on keyboard slide up (by animating top relative positioning coordinates).

Though this seems doable, I am wondering if this is the kind of work around used by the Skype iOS App team...

Any advice on technics used in this particular case is welcome!

cheers,

Fred

Answer 1

I think you want to call focus on the element directly and use the 'preventScroll' option.

el.focus({preventScroll: true});

$('#el').focus((e) => {
  e.preventDefault();
  e.target.focus({preventScroll: true});
})

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus

Answer 2

I haven't tested this yet, but does e.preventDefault() stop the issue? Generally you use e.preventDefault() to stop default scrolling / dragging behaviour.

$(document).bind('focus', function(e){
  e.preventDefault();
});

or better

$(element).bind('focus', function(e){
  e.preventDefault();
});

or

$(document).bind('touchstart', function(e){
  e.preventDefault();
});

Would an input field work better?

$(":input").live({
  focus: function(e) {
    e.preventDefault();
  }
});