Tag Archives: keyboard

Preventing Webview Bounce and Keyboard Layout Shift

11 Apr 2015

Using libraries over frameworks means that there are few things that you have to do yourself. Preventing webview bounce – as can be seen in mobile Safari – is one of them. This is especially true since you are most likely using a scrolling library such as iScroll. Webview-bounce and iScroll don’t play well together. This issue turns out to be an easy one to solve. simply add this to your project:

document.ontouchmove = function(e){e.preventDefault()};

The next irritation for us web app developers is how the keyboard moves the screen around when it appears. It will move your layout to ensure that the focused input element is visible. The caveat is that iOS will not return the layout to its previous position if the user touches the layout to put away the keyboard instead of tapping the “hide keyboard” button. Even the “hide keyboard” button may not return the view to normal.

This is also easily solved, add this to your project:

var repositioner = null;
$('body').on('blur','input,area',function(){
  repositioner = setTimeout(function(){window.scrollTo(0,0;},200);
});
$('body').on('focus','input,area',function(){
  clearTimeout(repositioner);
});

Why the setTimeout? Well, lets say we only set a listener for the blur event. When an input element gains focus iOS will display the keyboard and shift the entire view up. With the keyboard still visible you could touch and thereby give focus to other input elements. But, giving focus to a different element blurs the previously focused element. This causes the view to bounce up on the blur event and then back down on the focus per what iOS feels like doing. Basically, the view bounces up and down as you touch form elements (this wont happen if you use the iOS keyboard’s built-in input tabbing).

By giving mobile Safari a 200 milisecond timeout we prevent the bouncing screen when touching input elements. Once the user puts away the keyboard the timer is quick and repositions your web app without a perceptible delay.

Android 4.1.2/PhoneGap 3 AdjustPan with Fullscreen Theme

17 Mar 2014

If you’re reading this you’ve been stung by the AdjustPan bug in PhoneGap – this is where the softkeyboard appears when one of your text fields gets focus but the view does not shift up to reveal the field that you’re attempting to type into. Setting the windowSoftInputMode in your application manifest to “adjustPan” should in theory accomplish this. Apparently no amount of XML / main activity settings will create the desired result so the average PhoneGap dev – one who is not a Java Developer – has to rely on whatever work-around the community decides to share.

Go here to read about the expected behavior of windowSoftInputMode’s “AdjustPan” setting. You may also want to read about the bug. Various posts I have read say that this bug seems to manifest itself because PhoneGap is running fullscreen (using a Fullscreen Theme).

To be honest, I *have* seen this work in an older project so it must be something that was introduced to Android after my last viewing of it.

In any event the community at large has provided a fix – after some Googling I came across this StackOverflow post:

http://stackoverflow.com/questions/19849462/phonegap-android-how-to-adjust-layout-in-full-screen-mode-when-softkeyboard-is

The above gives enough directions to get started though some small points are left out. The missing step-by-step is why I’m posting today – I’m going to walk through the entire process and to touch briefly on the variant of the fix also posted in the above link.

app_adjust_pan_compressed

The “AndroidBug5497Workaround” & “AdjustInputHeight” Java Classes

“AndroidBug5497Workaround” is the name of the class that defines the first fix. It works as advertised and in fact performs better than the variation of it on my Samsung Galaxy S2 (Android 4.1.2). This fix will bump up the display immediately with no delay or animation. The view stays shifted upwards revealing the element with focus until the keyboard is put away where the view then returns to normal.

The second example, a variation of the first, animates the view up but has a bug that shifts the view down to its default position after the first keystroke. Thereafter, it works fine. Again, I found the first example to be more reliable and in fact preferable to animating the view.

If you’re curious you can implement the second one and play with the animation time setting – look for the number “500” in the source. I assume it represents milliseconds.

How To Implement

Navigate to the root of your project

Locate your “src” folder. In a PhoneGap 3 Project it would be here (substitute the bracketed text for your own project-specific values):

  • projects\[APP NAME]\platforms\android\src\com\[NAMESPACE]\[APP NAME]

Or in Eclipse you might find the “src” folder in the Package Explorer.

Once you locate your “src” folder you should be looking at your main activity java file – we’ll be giving it a friend…

Create a new text file to hold the fix

Create a new text file. Then, go to the link given above and copy the source for the first AndroidBug5497Workaround example and paste it into your new text file – save and close.

Rename the file

Next, rename the file so that it matches the class that it holds and give it the java extension. It should look like this:

  • AndroidBug5497Workaround.java
Open your Main Activity

With a text editor open your main activity Java file – it was the first file you saw in your “src” folder and probably is named after the name of your app. Look at the top of the file – you are looking for line a that looks like this:

  • package com.[NAMESPACE].[APP Name];

Its the only line that starts with the word “package” – copy that entire line and paste it at the very top of the other file – the one you’ve just created.

Add the fix to your main activity

Go back to your main activity Java file – you will need to paste this line after the super.loadUrl line:

  • AndroidBug5497Workaround.assistActivity(this);

It should look like this when you’re done:

adjustPanFix

Thats it – If in Eclipse clean your project and try it.

If you want to try the other example (again at the StackOverflow link given at the top of this page) then just follow the same procedure but be sure to use its class name (AdjustInputHeight) as the name of the file and when adding to your main activity.