Geek Answers Handbook

Text field does not focus on UI WebView in iOS7

The text field does not focus if it is located in the lower half of the screen, but it works if it is in the upper half. I find this problem in iOS7 in the simulator as well as in the device in the installed application. I use sencha touch and phonegap, but I don’t think they are the cause of the problem, because even a simple text field below half the height of the screen fails.

When I click on a text box, the OS must click on the text box a little higher before the keyboard is shown. But this does not happen; instead, the keyboard is displayed without focus or tapping the screen. How to enable this in iOS7 so that I can fix this problem.

thanks

+4
source share
4 answers

Finally, I found the cause of the problem. If you are using UIWebview, you must set the minimum height of the body tag to the internal height of the device. For example, 460px for iPhone 4S or 520px for iPhone 5

Internal height = Device height - Status bar height = 460 pixels, which should be basically the height of the application container. I put this piece of code into a phone ready device and it worked like a charm

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

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 fine for me, and also not including javascript.

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

+5
source

iOS. UITextField , , textField, , . , Sencha/phonegap iOS7. , .

,

+1

:

, Sencha , :

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

More articles:


All Articles