UIWebView automatically is shifted up after keyboard appears

Question

My UIWebView is shifted up when the keyboard appears, and when the keyboard dismisses, the webview does not come back to its previous position. I've checked out the webview's position before and after the keyboard appears, or dismisses. What a surprise, the webview's frame is not changed. But what I've seen before and after are quite different.

Before the keyboard appears:

before

When the keyboard appears, the webview is shifted up

appears

When the keyboard dismisses, the webview is not shifted down

after

What I did so far is applying the following techniques I read from others:

1) observe the keyboard notification, and adjust properly after that

observe keyboard notification

2) Change the meta tag, also add "height=device-height" in the meta tag

meta tag

3) Change the webview's attributes:

_webView.contentMode = UIViewContentModeScaleAspectFit;
_webView.scalesPageToFit = YES;
_webView.autoresizingMask = (UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth);

However, all of these suggestion above do not work. Could you please help me?

Note: I use iOS7, XCODE 5

are you using iScroll or any other js framework for custom scrolling? — 2intor, Aug 18 '14 at 14:03
It seems that we don't use. But what do you mean in the case of using the custom scrolling? — chipbk10, Aug 18 '14 at 14:14
Remove css once and try to generate the issue.Just give this a try. — 2intor, Aug 18 '14 at 14:17

score 2 · Answer 1 · answered Aug 18 '14 at 14:40

A UIWebView has a UIScrollView in it to manage content which is bigger than the screen. When you adjust the height of a UIScrollView it usually has an impact on it's scroll position. When you shrink the height with a keyboard it causes content to scroll up to keep the text field visible (by modifying the contentOffset), but when you expand the height it just shows more content at the bottom and doesn't change the contentOffset back to the original value.

There are slews of ways to come at this problem and everyone who creates an editable text deals with it at some point. I've used many over the years I'm sure there are probably better ones I haven't even seen.

The way I did it last was by modifying the contentInset of the UIScrollView and saving off the original contentOffset so I can re-populate it later.

Set up your notifications

[[NSNotificationCenter defaultCenter] addObserver:self
                                         selector:@selector(keyboardWillShow:)
                                             name:UIKeyboardWillShowNotification object:nil];

[[NSNotificationCenter defaultCenter] addObserver:self
                                         selector:@selector(keyboardWillHide:)
                                             name:UIKeyboardWillHideNotification object:nil];

Do stuff on notifications

- (void)keyboardWillShow:(NSNotification *)notification {
    NSDictionary *userInfo = [notification userInfo];
    CGRect keyboardRect = [[userInfo objectForKey:UIKeyboardFrameBeginUserInfoKey] CGRectValue];
    CGFloat keyboardHeight = UIInterfaceOrientationIsPortrait(self.interfaceOrientation)?keyboardRect.size.height:keyboardRect.size.width;
    CGFloat duration = [[userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] floatValue];
    CGFloat animationStyle = [[userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] floatValue];

    self.tableViewOffset = self.tableView.contentOffset
    UIEdgeInsets contentInsets = self.tableView.contentInset;
    contentInsets.bottom = keyboardHeight;

    [UIView animateWithDuration:duration delay:0 options:animationStyle animations:^{
        self.tableView.contentInset = contentInsets;
    } completion:nil];
}

- (void)keyboardWillHide:(NSNotification *)notification {
    NSDictionary *userInfo = [notification userInfo];
    CGFloat duration = [[userInfo objectForKey:UIKeyboardAnimationDurationUserInfoKey] floatValue];
   CGFloat animationStyle = [[userInfo objectForKey:UIKeyboardAnimationCurveUserInfoKey] floatValue];

    UIEdgeInsets contentInsets = self.tableView.contentInset;
    contentInsets.bottom = 0;

    [UIView animateWithDuration:duration delay:0 options:animationStyle animations:^{
        self.tableView.contentInset = contentInsets;
        self.tableView.contentOffset = self.tableViewOffset;
    } completion:nil];
}

What is the tableViewOffset? and tableView? you mean the webView? — chipbk10, Aug 18 '14 at 14:45
`tableViewOffset` was just a local variable I used to store the `contentOffset` before it got changed so I could restore it later. webView, tableView, meh. They are both wrappers around a `UIScrollView` and we are talking about dealing with the underlying scroll view. — DBD, Aug 18 '14 at 14:54

score 0 · Answer 2 · edited May 23 '17 at 12:00

What I solved my problem is

1) observe when the keyboard dismisses:


- (void)observeKeyboard {
    [NotificationCenter addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
}

- (void)removeObserveKeyboard
{
    [NotificationCenter removeObserver:self name:UIKeyboardWillHideNotification object:nil];
}

2) When the keyboard is about to hide, we trigger a js to scroll it up.


- (void)keyboardWillHide:(NSNotification *)notification {

    [self scrollBackToTop];
}

//- Fix bug: the UIWebView Content is scroll up when the keyboard appears
-(void)scrollBackToTop {

    [_webView stringByEvaluatingJavaScriptFromString:@"window.scrollTo(0, 0);"];

}

Thanks to this link : link

UIWebView automatically is shifted up after keyboard appears

2 Answers2