CODEWITHSUNDEEP
iosswiftkeyboardwkwebview
Alexey Saechnikov
Alexey Saechnikov

Reputation: 481

Custom keyboard in WKWebView

I want to control the keyboard displayed when using WKWebView.

I have the following swift code starting the webview:

let webView = WKWebView(frame: self.view.bounds, configuration: configuration)
webView.navigationDelegate = self

It will load html that looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
    <div class="inputElement textFieldInput">
        <input type="text" id="textField" value="" data-clear-btn="true"/>
    </div>
</body>
</html>

Normally the keyboard is controlled by the type option on the input field. "num" for a numeric keyboard and "text" for a alphanumeric keyboard. But I want to have more control.

I have done enough research to know that this can not be accomplished by using the option on the text box. I am fully expecting to write modify the code that opens the webview.

How can I modify the swift code to allow me to do this?

Ideally, I could define multiple keyboards and allow the html code to control them something like this: <input type='customkb1'> and <input type='customkb2'>

My immediate need is to disable the emojis button on the keyboard but I would like a generic solution as I will be able to really improve the usability of my application if I can define a keyboard specific to what the user is inputting.

Here is what we have found so far: That is trick I know and use for native part of the application: https://stackoverflow.com/a/25861718/1885345

But it doesn't work for webViews That is the way to specify keyboard from WKWebView: https://stackoverflow.com/a/28533488/1885345

But it doesn't have the option to set keyboard without emojis That is what I use to disable third-party keyboards: https://stackoverflow.com/a/34863426/1885345

Upvotes: 4

Views: 3274

Answers (2)

Yakov Manshin
Yakov Manshin

Reputation: 798

If you’re looking for a way to only allow certain characters to be entered in an input field, disabling keyboard modes (the emoji keyboard, for example) isn’t the best option. There are many ways to type in unwanted characters: they can be pasted from the clipboard, or even entered in the result of text replacement (for example, you can make :) turn into 😁).

Input validation should be done on the webpage side, not with WKWebView.

Upvotes: 0

Lookaji
Lookaji

Reputation: 1043

Nice challenge! So far I have tested it on an iPad and got it half-working (with a caveat) by declaring the input field's pattern as such:

<input type="text" pattern="[0-9]*" value="" data-clear-btn="true"/>

The thing is that the keyboard actually pops up first with the numeric view but it allows to toggle the alphanumeric (without emojis) view via the lower ABC side-buttons. With Javascript I copied the entered value to another field and the Regex does not actually filter out the entered alphanumeric characters. So far so good.

As soon as you put A-Za-z (as prefix or postfix) into the pattern, the emoji button comes back though.

I have tried catching the UIResponder.keyboardWillShowNotification but does not return the keyboard object, as I wanted to set its UIKeyboardType programmatically then, but this attribute only reflects UITextViews apparently.

Alternatively you could declare the input field of password type, clearing the dots with Javascript and displaying the actual value to another non-editable field...

If I find a more elegant way, I will update my answer as it is getting quite late. Cheers.

EDIT: Apparently only using a TextInput element with ReactNative you can directly prop the keyboardType to the ascii-capable iOS keyboard which shall set us free from Emojis.

Upvotes: 2

Related Questions