Phonegap / Sencha Touch: problem with displaying WebView on hiding SoftKeyboard

Question

Software

I use Sencha Touch (2.1.1) and PhoneGap (2.5.0) to develop an application for Android and iOS.

My problem

There are several views with input fields ( Ext.field.Text and Ext.field.Email ) at the bottom of the container. When you press the input field, Android SoftKeyboard pops up and pushes the whole view up, so that the input field is not hidden by the keyboard.

Now, when you hide the keyboard (by clicking the Android hide button or clicking anywhere except the input field), the WebView does not always snap back until you touch WebView again.

Equipment

I am currently facing this problem on Nexus 4 (Android 4.2.2). Everything works fine on iOS (iPhone 4/5) and even on Sony XPERIA Go (Android 4.0.4).

Screenshots

Here are some screenshots of the problem:

I already realized that I can change Android windowSoftInputMode to adjustNothing , but then you will not see the typed text until you hide the keyboard ...

Update

Some comments on Sergio's 3 mitigations.

The first solution seemed to me the best. This only affects the Android project and does not inflate my JS code (e.g. if Ext.os.is.Android ... ) or iOS. Unfortunately, my Nexus 4 still adjusts to focus and does not return to blur if I set windowSoftInputMode as described ...

The second solution sounds more complicated. I will need to move each (lower aligned) component into focus and return to blur if the OS is Android. While this is definitely possible, another problem may arise: the user can hide the keyboard with the back key of the device without removing the input focus (blur does not work). Therefore, I do not think this is a suitable solution.

The third solution is for entering numbers. But writing a virtual keyboard for entering text is not an easy task: the alignment of the keys differs between locales (for example, y and z are transferred to German keyboards), and we will not meet the expectations of users by offering an alternative keyboard (screen input, sentences, ...) .

Do not get me wrong, I am grateful that you shared your mitigations with me! But I'm still not completely satisfied.

Answer 1

Sencha Touch 2.2.0 fixes the problem!

I finally found a suitable solution. On April 15, Sencha released version 2.2.0 of its Touch system. After upgrading from 2.1.0, the layout will come back!

To save a different time: note that Sencha Cmd 3.1.x (which is required for version 2.2.0) does not work with Ruby 2.0 +0.0. The build process will fail with some strange error messages. Using 1.9.3 works fine.

Update # 2: Sencha Touch 2.2.1 ...

Good .. I just upgraded to Sencha Touch 2.2.1 and the problem is back! Therefore, if you plan to use the latest version of Sencha Touch, note that the keyboard may break your layout: /

Answer 2

A few months ago I spent a lot of time trying to understand this problem. Tried a bunch of things sifted through Google / StackOverflow.

Ultimately, I could not do exactly what I was looking for; it doesn't look like we have enough (light) control over the keyboard from Sencha Touch / PhoneGap for many things (on top of the keyboard position we also have basically 0 control over what “return / go / ok” means, on in fact, it depends on the version of Android, especially when it is a number field.) However:

windowSoftInputMode="stateUnspecified|adjustResize" 1: windowSoftInputMode="stateUnspecified|adjustResize" will cause the keyboard to close the input signal, but as soon as the user starts to enter text, the screen will be adjusted to display the input directly above the keyboard, and everything will return if the input is blurry. This is at least for the Samsung Galaxy S2 (2.6), Samsung Galaxy S3 (4.2) and Kyocera Rise (4.0).

Softening 2: One of the solutions I implemented was that when you entered the focus, the position of the inputs changed to ensure that they were above the keyboard. If the input is blurred, the input will change to its original location. This is not ideal, because you will often see that the inputs move to a new place before the keyboard closes it, so it looks rather noisy.

Softening 3: For numeric fields, I used a modified version of https://market.sencha.com/extensions/numpad , which created a virtual keyboard and set "showBy ()" for it as the required input. This ensured that the keyboard never covered the input, and the application did not have to deal with any repositioning of the screen (screenshot below).

Softening problem 3: The problem is that it is only for numeric fields, and I could not find any standard keyboard plug-ins for Sencha Touch (my application focuses on quantity so that the restriction is acceptable). However, I'm sure you could spend a few days using the numpad plugin as the kernel to create a virtual keyboard that could work in a similar way.

Sorry for the lack of a perfect solution. Hope this is helpful!