Textfield does not focus in UI WebView in iOS7

问题

The textfield does not focus if it is located in the bottom half of the screen but it works if it is in the top half. I find this problem in iOS7 in the simulator as well as the device in an installed app. Iam using sencha touch & phonegap but I dont think they are the reason for the problem since even a simple textfield positioned below half the height of the screen fails.

When I tap on the textfield the OS should push the textfield a little above before the keyboard gets shown. But this does not happen instead only the keyboard is shown without any focus or pushing of the screen. How should I enable this in iOS7 so that I can fix the problem.

Thanks

回答1:

Finally found the reason for the problem. If you are using UIWebview then you should set the min-height of the body tag to the inner height of the device. For example 460px for iPhone 4S or 520px for iPhone 5

Inner Height = Device height - Status bar height = 460px which should basically be the height of the app container. I put this piece of code in my phone gap device ready function & everything worked like a charm

document.addEventListener("deviceready", function(){
    var body = document.getElementsByTagName('body')[0];
    body.style.minHeight=window.innerHeight + 'px';
}, false);

回答2:

This is a known iOS7 bug, please try

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

Worked great for me and also not including any javascript.

Setting height=device-height in meta tag seems to solve this.

回答3:

This does not happen automatically in iOS. When a UITextField becomes first responder the keyboard will appear then it is up to you to either move the textField up or scroll the entire view up so it's viewable. It sounds like Sencha/phonegap handles this for you and no longer is working properly in iOS7. If that is the case you need to move it the old fashioned way.

Move a textField up when keyboard is present

回答4:

You could just change the Meta tag to be :

Just note that Sencha is adding dynamically the meta tag, I added the following function:

function init() 
{
    var ua = navigator.userAgent;
    uaindex = ua.indexOf( 'OS ' );
    userOSver = ua.substr(uaindex + 3, 3 ).replace( '_', '.' );
    userOsve = userOSver.substr(0,1);
    if(userOsve == "7")
    {
 if(screen.height > 481)
       var phone_height = "550"
 else
   var phone_height = "450"
var content="width=device-width, height="+phone_height+", initial-scale=1.0, maximum-scale=1.0,target-densityDpi=device-dpi";
    document.getElementsByName('viewport')[0].content = content;
    }
}

来源：https://stackoverflow.com/questions/19542470/textfield-does-not-focus-in-ui-webview-in-ios7