Keyboard Positioning Problems

[jeresig]

When interacting with a form element in a webview, the entire webview gets shifted up, making it hard to see or interact with anything that's now hidden.

For example, before clicking: http://gyazo.com/c5adfc8c4396c45893949ef5f1968bc3

And after clicking: http://gyazo.com/18afdfa015aead97717e182ef9ce7225

[adamjernst]

Just FYI, what's really happening here: the frame of the web view remains unchanged, but it's adjusting its contentInset and scrollIndicatorInset (or some equivalent internal properties) so that you're only scrolling/viewing in the area that is not underneath the keyboard.

I doubt this is relevant to your fix for this bug, since you'll just have to detect the viewport size change and resize the page accordingly. But it's an interesting tidbit about how this is actually implemented on the native side.

[jeresig]

Thanks @adamjernst. I'll play around with adjusting the height of what's being displayed - although it may require some jimmying of the content, we'll see!

[jeresig]

@adamjernst: So I've played around with this some more but haven't had any luck - it doesn't look like JS gets any notification about the frame size changing. I've been checking around on Stack Overflow and it seems like this is one possible (Obj-C) solution that would fix this: http://stackoverflow.com/questions/2293898/iphone-keyboard-hiding-fields-in-uiwebvie

[jeresig]

There are a couple additional problems that've come up. To start, while it's possible to make the UI be positioned via fixed positioning it's really buggy, at best. Additionally it'll still "scroll" up because the UIWebView is physically being moved up by the keyboard. Additionally it's not possible to programatically trigger the focus on an input element, forcing the user to click the keyboard every time the exercise loads.

Here's what we should be doing:

• The keyboard should always be displayed if there is a text field input. The keyboard should never be displayed if there isn't a text field input.
• If we're looking for a decimal/number input then we should default to showing the number keyboard.
• The UIWebView's size should be a static size relative to the keyboard. For example, let's pretend it's 500px tall normally and the keyboard is 200px tall. If we want to show an exercise that requires a keyboard then the UIWebView should be resized to 300px and remain that size until the user chooses to return to the videos.

[jeresig]

Same here - I think we don't have to worry about this now that we have a custom keyboard.