I finally found the solution to my question. BTW, this solution will be in my book which will be published soon. I just wanted to share this with the developer community.
First of all, iscroll should handle this matter for us, but somehow it does not.
Also, I think there is a bug in Android API. When I use full-screen mode (in manifest or programmatically), the "resize" event does not get fired in the WebView. No idea why. I already reported this bug to Android team. If you know why this happens, please let us know here. Thanks.
android:theme="@android:style/Theme.NoTitleBar.Fullscreen"
// or
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
Here is the solution:
I removed the full-screen mode. Instead, I used res/values/style.xml
, requestWindowFeature(android.view.Window.FEATURE_NO_TITLE);
and android:theme="@style/Theme"
in the application in order to remove the application native title. This solution also works when orientation occurs.
Then, using "focus" event, I captured which element has a focus.
var $elm;
$('input, textarea').bind('focus', function(e) {
console.error("onFocus");
$elm = $(this);
});
Then, using "resize" event, I refreshed the iscroll object and then scroll to the $elm.
$(window).bind('resize', function() {
console.error("onResize");
if (myScroll !== undefined) {
setTimeout(function() {
myScroll.refresh();
myScroll.scrollToElement($elm[0], 200);
}, 100);
}
});