In a webview, how do I know when an input should resignFirstResponder

Question

Portions of my app present users with forms via a webview. I've had a few users ask why after entering data into a field when they continue to scroll down the form/webview the keyboard remained visible on the screen. I cannot seem to find any textarea or textfield delegate method which would dismiss the keyboard.

I am apprehensive to start adding gesture recognizers because I don't want to override the touches on the webview.

I'm using a WKWebView but I can't seem to find a clean solution for either UIWebview or WKWebview. — propstm, Jun 29 '18 at 16:19

score 1 · Answer 1 · answered Jan 25 '19 at 13:32

Native behavior: The Keyboard shows automatically on focus on an UITextView, to hide it again, you need to call yourself on the UIView [self.view endEditing:YES];

On the WKWebView the Keyboard also shows automatically on focus on an HTMLInputElement for example and hides on blur. But the WKWebView does not blur the focus of the HTMLInputElement by tapping somewhere outside (e.g. on the body), so the Keyboard still stays in the view.

If you want to hide the Keyboard after some scrolling you could just go with a little JS (inject it just into the WKWebView):

var SKIP_BLURRING = ['INPUT', 'TEXTAREA'];

document.body.addEventListener('touchend', function (event) {
    var activeElement = document.activeElement;
    var tapped = event.target;
    var shouldSkipElement = SKIP_BLURRING.indexOf(tapped.tagName) > -1;
    var isSameElement = activeElement === tapped;

    if (shouldSkipElement || isSameElement) {
        return;
    }

    activeElement.blur();
}, false);

In a webview, how do I know when an input should resignFirstResponder

1 Answers1