Xcode 6 Swift WKWebView keyboard settings

Question

I'm using a WKWebView to load a website and everything is working fine. However, I do not have access to the keyboard properties the same way I do with a textfield. Can someone point me to some resources that will help me access properties (through the gui or programmatically) of the keyboard on the web?

Answer 1

The Text Programming Guide for iOS, has a section called Configuring the Keyboard for Web Views that states the following:

Although the UIWebView class does not support the UITextInputTraits protocol directly, you can configure some keyboard attributes for text input elements. For example, you can include autocorrect and autocapitalize attributes in the definition of an input element to specify the keyboard’s behaviors, as shown in the following example.

<input type="text" size="30" autocorrect="off" autocapitalize="on">

You can also control which type of keyboard is displayed when a user touches a text field in a web page. To display a telephone keypad, an email keyboard, or a URL keyboard, use the tel, email, or url keywords for the type attribute on an input element, respectively. To display a numeric keyboard, set the value of the pattern attribute to "[0-9]*" or "\d*".

These keywords and the pattern attribute are part of HTML 5 and are available in iOS. The following list shows how to display each type of keyboard, including the standard keyboard.

Text: <input type="text"></input>
Telephone: <input type="tel"></input>
URL: <input type="url"></input>
Email: <input type="email"></input>
Zip code: <input type="text" pattern="[0-9]*"></input>

That, of course, only solves some very specific problems in a limited number of situations, but as far as I know that's all we've got to work with, even with WKWebView.

I would love for someone to prove me wrong and let us know how to add a keyboard accessory view, or change the appearance of the keyboard when it's focused on a form element inside a web view in an iOS app.

Answer 2

I have an HTML auth page that I display in WKWebView. The autocorrect / suggestion bar appears above the keyboard for the username field. Since I don't control the HTML, I used the following Swift 3 code and javascript to add the autocorrect attribute as mentioned above:

    var webView: WKWebView!

override func loadView() {

    let autocorrectJavaScript = "var inputTextElement = document.getElementById('username');"
    + "   if (inputTextElement != null) {"
    + "     var autocorrectAttribute = document.createAttribute('autocorrect');"
    + "     autocorrectAttribute.value = 'off';"
    + "     inputTextElement.setAttributeNode(autocorrectAttribute);"
    + "   }"
    let userScript = WKUserScript(source: autocorrectJavaScript, injectionTime: .atDocumentEnd, forMainFrameOnly: false)
    let webConfiguration = WKWebViewConfiguration()
    webConfiguration.userContentController.addUserScript(userScript)
    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    view = webView
}

Note: The bar above the keyboard still remains, with other options, just not the suggestions.