Prevent page scrolling when switching focus

Question

I am new to / dev mobile network. My app uses jquery-mobile, phonegap and Compass (scss).

I have a problem on my login page:

logo and fields are contained in standard containers "div" (data-role = "content" data-type = "vertical"). The background is painted.

when you switch focus from the input field to the password field, the page slides off, which I do not want to do. I would like my logo and fields to remain in place, just like the Skype iOS App login page.

here's what happens:

I tried several tricks, trying to block scroll events or forcibly scrolling the page to 0.0, without success.

Now I’m thinking of a new strategy, perhaps using the top relative positioning for the logo and margins and capturing focal events to scroll the page myself, when I click on the keyboard (by animating the upper relative positioning coordinates).

Although this seems doable, I wonder if this is the work that the Skype iOS App team uses ...

Any advice on the technique used in this particular case is welcome!

amuses

Fred

Answer 1

I think you want to call focus on the element directly and use the "protectScroll" 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 have not tested this yet, but does e.preventDefault () really stop the problem? Typically, you use e.preventDefault () to stop the default scroll / drag behavior.

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

or better

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

or

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

Will the input box work better?

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

Answer 3

I finally could not find any solution to handle my problem, but I noticed that surgical positioning allowed me to freeze the screen when switching between fields.

The space available for the entire login screen should not exceed the space available after the keyboard is visible, i.e. 200 pixels. In addition, to prevent scrolling when switching, the last center position of the input field should not exceed 100 pixels. Using CSS, you can play with padding and markup to achieve the desired result.

It should be possible to get extra vertical space by deleting the keyboard "field navigation bar", but I don't know how to do it: /

Answer 4

I had a similar problem (with page scrolling on click / focus) and it took me a while to find a solution, so I am documenting it here.

I had a custom form field that, when clicked, scrolled the page to the very top. It turns out that the input was hidden using position: absolute; top: -99999999px; position: absolute; top: -99999999px; (because if you hide it correctly, focus events will not work). This placed the hidden input at the top of the page. Then, when we clicked the shortcut and the focus was focused, the page was scrolled to the very top.

I searched for things like Scroll Up Focus / Click and all kinds, but I couldn't find anything decent. The solution was to use right: -99999999px . I avoided using typical left: -9999999px , because obviously this could affect the site when using direction: rtl;