javascript - CordovaPhonegap 3.1 keyboard (still) overlays focused form fields - iOS 7 - Stack Overflow

admin管理员组

文章数量:1221441

I just upgraded from cordova 3.0 to 3.1 and I'm still experiencing a very disturbing issue (which still exists when playing with KeyboardShrinksView preference).

Whenever I'm focusing an element (input/textarea) which triggers the keyboard opening, the element gets hidden behind the keyboard and I need to scroll down (using webkit-overflow-scrolling for scrolling by the way) in order to see the element and its content.

When KeyboardShrinksView is set to true the page won't even scroll, making it even worse.

Any solutions in order to fix this issue? I've seen a few questions and bug reports but with no working solutions (or solutions at all).

Playing with the "fullscreen" preference won't solve the problem.

I just upgraded from cordova 3.0 to 3.1 and I'm still experiencing a very disturbing issue (which still exists when playing with KeyboardShrinksView preference).

Whenever I'm focusing an element (input/textarea) which triggers the keyboard opening, the element gets hidden behind the keyboard and I need to scroll down (using webkit-overflow-scrolling for scrolling by the way) in order to see the element and its content.

When KeyboardShrinksView is set to true the page won't even scroll, making it even worse.

Any solutions in order to fix this issue? I've seen a few questions and bug reports but with no working solutions (or solutions at all).

Playing with the "fullscreen" preference won't solve the problem.

• javascript
• jquery
• ios
• html
• cordova

Share Improve this question Follow edited Jan 5, 2021 at 10:45 peterh 1 asked Oct 8, 2013 at 2:09 AlexAlex 56522 gold badges66 silver badges1717 bronze badges 2

• 1 Look at this answer. It fixed it for me. – tkh44 Commented Oct 9, 2013 at 20:48
• Great answer! Thanks for sharing and it does the work automatically for the keyboard but unfortunately my fixed header gets hidden (it's not fixed anymore and scrolls with the view). Any solution for this part? Cheers – Alex Commented Oct 9, 2013 at 22:58

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 5

Just had a very similar problem to this. Some of the hacks found on this site did work, but had nasty side effects (such as making a mess of scrolling or CSS layout). Finally came up with a brand new stupid hack.

Viewport meta tag:

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

JavaScript run after load:

document.body.style.height = screen.availHeight + 'px';

And that's it. Works on iOS 7 and I have no idea why.

Finally fixed the problem with the help of the following plugin: jQuery scrollTo plugin

Whenever i'm focusing on an element i'm triggering a focus event which does the following calculations and updates the scroll position:

updateScroll: function(e){
    var el = $(e.currentTarget);
    var offset = -$(".scrollerWrap").height() + $(el).height();
    $(".scrollerWrap").scrollTo(el,{offset: offset});
}

Sticks the bottom of the input/textarea to the top of the keyboard. Works like a charm, even if the solution needs to go through that bit of JavaScript.

Well, logically the view should move up when the keyboard opens. I have faced a similar issue with iOS7 and to fix it I have applied few css tweaks.

Tweaks were applied on the wrapper class/id which is containing the content of the app.

position: relative;
overflow: hidden;
height: 460px;
width: 320px;

Note - Height and width are judged dynamically depending on the device height and width

height = window.innerHeight
width = window.innerWidth

By using jQuery selectors height and width are appended to wrapping class/id.

Works for me.

document.body.style.height = (screen.availHeight - 100) + 'px';

I think the issue here originates from Framework7.

document.body.style.height = window.outerHeight + 'px';

The above code placed in my index.js file worked like charm.

本文标签： javascriptCordovaPhonegap 31 keyboard (still) overlays focused form fieldsiOS 7Stack Overflow