I’ve been experimenting with PhoneGap, a nice UIWebview wrapper for iPhone, Android, and ~Blackberry. Since the development happens in javascript, you spend more time working around the limitation of UIWebView.
I ran into the following problem. I have several input fields on a page. As the user moves to each input field on the iPhone, the screen rightly scrolls to the next input field. When the user has finished entering their data, the screen only partially scrolls back home. I got around this with the following – I hope it helps someone…
//**************************** jKeyboardGotDismissed() & jKeyboardGotShown() -BEGIN- ******************************
// This snippet give you a reasonable way to detect that the user is not currently input data.
// Motivation: On the iphone, when inputing data, the soft keyboard pops up. When the keyboard is dismissed, it doesn't
// usually scoll back to the original position.
//
// I know this is kludgy. There is probably some slick way to detect that a input box lost focus, but that it had
// moved on to onother input box, or not - but I couldn't find any examples. This uses a timer, and seems to fall
// into the good-enough category.
//
// Insturctions:
// Copy this block of code into your script
// Modify jKeyboardGotDismissed() & jKeyboardGotShown() as desired.
//
// Use Cases:
// Make sure the screen has scolled to 0,0 after the user finishes inputing data on the iphone
// add something like " window.scrollTo(0, 0) " to jKeyboardGotDismissed()
var bStoppedInputtingUnlessSomeoneTellsMeOtherwise = true;
var enumKeyboardStateThereGone = "Gone";//There, means the keyboard must be visible, "Gone" means it must be hidden
function _jFocusTypeHelper() {
if (bStoppedInputtingUnlessSomeoneTellsMeOtherwise == true) {
if (enumKeyboardStateThereGone == "There") {
enumKeyboardStateThereGone = "Gone";
jKeyboardGotDismissed();
} else {
enumKeyboardStateThereGone = "Gone";// why twice? Just so enumKeyboardStateThereGone will be set before the function call.
}
} else {
if (enumKeyboardStateThereGone == "Gone" ) {
enumKeyboardStateThereGone = "There";
jKeyboardGotShown();
} else {
enumKeyboardStateThereGone = "There"; // why twice? Just so enumKeyboardStateThereGone will be set before the function call.
}
}
}
// This function gets called whenever the keyboard is dismissed. feel free to modify it
// Motivation: I wanted to make sure the screen scolled back to the right spot after the last input
// Known Limitations: 1/4 second delay before jKeyboardGotDismissed is notified.
function jKeyboardGotDismissed() {
//alert("The soft Keyboard just got dismissed (if, in fact, this device has a softkeyboard)");
window.scrollTo(0, 0);//Scroll home after the keyboard is dismissed. Delete this line if you don't want that to happen. @TODO: Add smooth scrooling
}
function jKeyboardGotShown() {
//alert("The soft Keyboard must have just popped up (if, in fact, this device has a softkeyboard)");
}
document.addEventListener("blur",function() {bStoppedInputtingUnlessSomeoneTellsMeOtherwise=true;setTimeout(_jFocusTypeHelper,250);},true);
document.addEventListener("focus",function() {bStoppedInputtingUnlessSomeoneTellsMeOtherwise=false;_jFocusTypeHelper();},true);
//**************************** jKeyboardGotDismissed() & jKeyboardGotShown() -END- ******************************
So, how would you use this? If you put this code in your page, it should just magically work.