Search code examples
webviewkeyboardios7

iOS 7 web view text field focus change when keyboard shows up

Update - Solution

@jfurr's answer in this post solve the problem.

Change this

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />

into

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Update - Workaround

But if I reduce the height of the web view for at least 37 points for 4 inches iOS 7 device (36 or less doesn't work), the focus would remain in the upper text field.

CGRect aCGRect = [webView frame];
aCGRect.size.height = [[UIScreen mainScreen] applicationFrame].size.height - 37;    
[webView setFrame:aCGRect];

Don't know why it's like this.

Problem

There is a full screen web view, on which two text fields (not iOS native text field) aligned vertically in the middle of the web view. When I click on the upper text field, it is expected to see the keyboard shown up and the focus lands on the upper text field with the web view appropriately move up a little bit.

Now the unexpected result is that when the upper text field is touched, the keyboard is able to show up, but the focus lands on the lower text field, and the cursor also move to the lower text field. However, this unexpected result happens only in iOS 7. It works as expected in iOS 6 and 5.

Solution

  • (Same as listed as Update - Solution in the post.)

    @jfurr's answer in this post solves the problem:

    ios7 issues with webview focus when using keyboard html

    Change this

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />

    into

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />