Textfield does not focus in UI WebView in iOS7

Question

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

Ram G Athreya · Accepted Answer · 2013-11-27T12:38:02.297

10

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);

edited Nov 27 '13 at 12:38

answered Oct 28 '13 at 06:59

Ram G Athreya

4,604
6
23
57

Hey ram, Thank you very much, you saved our time. You are just awesome. – Linson Nov 27 '13 at 11:46
2

Thank you, it was a big pain, there are lots of bugs in iOS 7 – Ram G Athreya Nov 27 '13 at 11:58
Yes really, we tried to solve this bug by upgrading the sencha version. But it was rework of the full project. Most of designs were break while upgrading. Hey ram, can i know how you found this solution? – Linson Nov 27 '13 at 12:03
1

I found it through trial & error can't give a better answer. I still use Sencha 2.1 as you say newer versions of the sdk always break the UI so we have stopped upgrading, but this is not a problem of Sencha it is rather a problem with iOS – Ram G Athreya Nov 27 '13 at 12:18
Thank you so much for this answer, this was driving us crazy! – BenV Jan 17 '14 at 19:42

score 5 · Answer 2 · answered Jan 29 '14 at 14:11

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.

score 1 · Answer 3 · edited May 23 '17 at 11:57

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

score 1 · Answer 4 · answered Nov 27 '13 at 11:05

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;
    }
}

Textfield does not focus in UI WebView in iOS7

4 Answers4

Linked