Search jQuery

jQuery Forum

Using jQuery

efkan

jQMobile re-positions popup every time when Android opens own virtual keyboard - I can't input anything

in Using jQuery • 4 years ago

Actually this is a problem. But it can be a new idea.

I could be wrong but I think there should be an option to disable handleWindowResize or it can run manually.

Through this way, we can allow to overlap the popup with the virtual keyboard. So we can use popup like a simple div.

_handleWindowResize: function(/* theEvent */) {
if ( this._isOpen && this._ignoreResizeTo === 0 ) {
if ( ( this._expectResizeEvent() || this._orientationchangeInProgress ) &&
!this._ui.container.hasClass( "ui-popup-hidden" ) ) {
/*If we can control the following line It would be perfect for Mobile development*/
this._ui.container
.addClass( "ui-popup-hidden ui-popup-truncate" )
.removeAttr( "style" );
}
}
}

I've asked my case on stackoverflow. Thanks to Omar, I could try a new method. But it doesn't work for me properly.

My story;

I've developed a PhoneGap app using Jquery Mobile 1.4.3 . My login page is a popup. And I faced with an endless process loop. The loop works with this order, Android opens its virtual keyboard, jQuery Mobile re-positioning the popup because the windows size has changed (so _handleWindowResize works in jquery.mobile.1.4.3.js and loses the focus). Android closes the virtual keyboard because there is no a focused input area. At the same time jQuery shows the popup at the center of the window but the window size has recently changed and then jQuery must show the popup at the new center of the window.

I can write an "If block" into the jquery library. However, it will be more difficult to manage my app.

Step by step my processes are like the following;

1. A user click the logon button

2. My popup page is opened

----------- first loop starts --------------

3. The user clicks the username field to type username

4. The cursor focuses the field

5. Android opens the virtual keyboard

6. Then jQuery try to reposition because the keyboard has shown and the window size has changed. So, popup hides and loses the focus.

7. Then Android virtual keyboard is hidden because there is no any active input.

8. jQuery shows the new popup without input focus

------------ first loop ends -----------

9. (Again) The user clicks the username field to type username

10. (Again) The cursor focuses the field

11. (Again)

12. (Again)

13. ....

Replies(1)

efkan

Re: jQMobile re-positions popup every time when Android opens own virtual keyboard - I can't input anything

4 years ago

I've seen the following reply in my e-mail after I moved my question. For this reason I added watusiware's answer.

---------------------------------------------------------------------------------------------------------------------------------------------------

There is any easy fix - don't use a popup!

I can't image what value using a popup adds. On small phones, you have little space above the virtual keyboard anyway, and a popup just makes the problem worse because it wastes values space. (Because you have margin around the popup, and if you don't - then it's not going to look like a popup.

Unfortunately, virtual keyboards and mobile browsers that try to insure that inputs are visible when the virtual keyboard is shown don't play well with anything but inline page content.

Popups, iScroll or FTScroller, your own absolute-positioned elements, etc. etc. all share the same problem. The browser plays tricks to make the input visible, but the browser can't account for any Javascript that moves things around.

It takes native code to fix (for iOS, not Android). I might be able to open-source a solution I have and eventually make it a PhoneGap plugin (currently only for RhoMobile Rhodes) - working on getting permission.

There are two basic problems. (Note I am talking about iOS, here, I have not done much work with this for Android.)

- The browser or WebView scrolls the native container in which the WebView resides. The browser or WebView provides no way to disable this, though.

- As well, the browser is not provided any events that could notify your code that the virtual keyboard is about the be shown, has been shown, is about to be dismissed, etc. nor is there any way to determine the dimensions of the virtual keyboard.

(I don't know how Android handles, but in iOS, the browser/WebView does NOT change the browser window size when the VK shows! So, there is no way to know how much space is visible! I think Android is different, and at least resizes the window.)

So, the JS code is pretty blind. You have to take guesses based on focus/blur. And when you do and the user uses a bluetooth keyboard instead then it won't work right. (of course that is rare, fortunately).


          Native scrolling
      using

overflow-y:auto with -webkit-overflow-scrolling:touch


                 might have
          better luck, because it is a DOM feature, and presumably the
          browser/WebView will know how to deal with it. (I realize this
          is not relevant to your popup problem - I only mention it
          because popups and software sub-page scrolling solutions share
          the exact same problem.)


                 Bottom line:
          there is no easy fix. Don't use a pop-up. With the
          simplification of the page, just say it's "flat
          design" and call it a feature. ;)

Top Reply

Response title

Attachments

jQuery Forum

jQMobile re-positions popup every time when Android opens own virtual keyboard - I can't input anything

Replies(1)

Re: jQMobile re-positions popup every time when Android opens own virtual keyboard - I can't input anything

Statistics

Tags

Actions