WKWebView 中的自定义键盘答案

【问题标题】：Custom keyboard in WKWebViewWKWebView 中的自定义键盘
【发布时间】：2018-11-11 06:04:14
【问题描述】：

我想控制使用 WKWebView 时显示的键盘。

我有以下启动 webview 的快速代码：

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

它将加载如下所示的 html：

<!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>

通常键盘由输入字段上的类型选项控制。 “num”表示数字键盘，“text”表示字母数字键盘。但我想拥有更多的控制权。

我已经做了足够的研究，知道这不能通过使用文本框上的选项来完成。我完全期望编写修改打开 webview 的代码。

如何修改 swift 代码以允许我这样做？

理想情况下，我可以定义多个键盘并允许 html 代码控制它们，如下所示：<input type='customkb1'> and <input type='customkb2'>

我迫切需要禁用键盘上的表情符号按钮，但我想要一个通用的解决方案，因为如果我可以定义一个特定于用户输入内容的键盘，我将能够真正提高我的应用程序的可用性。

这是我们目前发现的：这是我知道并用于应用程序本机部分的技巧： https://stackoverflow.com/a/25861718/1885345

但它不适用于 webViews 这是从 WKWebView 指定键盘的方法： https://stackoverflow.com/a/28533488/1885345

但它没有设置没有表情符号的键盘的选项这就是我用来禁用第三方键盘的方法： https://stackoverflow.com/a/34863426/1885345

【问题讨论】：

标签： ios swift keyboard wkwebview

【解决方案1】：

不错的挑战！到目前为止，我已经在 iPad 上对其进行了测试，并通过将输入字段的 pattern 声明为这样来使其工作一半（有一个警告）：

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

问题是键盘实际上首先弹出数字视图，但它允许通过较低的ABC 侧按钮切换字母数字（不带表情符号）视图。使用 Javascript，我将输入的值复制到另一个字段，而 Regex 实际上并没有过滤掉输入的字母数字字符。到目前为止一切顺利。

只要将A-Za-z（作为前缀或后缀）放入模式中，表情符号按钮就会返回。

我已经尝试捕获UIResponder.keyboardWillShowNotification，但没有返回键盘对象，因为我想通过编程方式设置它的 UIKeyboardType，但这个属性显然只反映 UITextViews。

或者，您可以声明 password 类型的输入字段，使用 Javascript 清除点并将实际值显示到另一个不可编辑的字段...

如果我找到更优雅的方式，我会更新我的答案，因为它已经很晚了。干杯。

编辑：显然只使用带有ReactNative 的TextInput 元素，您可以直接将keyboardType 支撑到ascii-capable iOS 键盘，这将使我们摆脱表情符号。

【讨论】：

我们可以看看 ReactNative 是如何做到的吗？
想了想我记得，ReactNative 没有使用 webview，所以他们可以做任何事情。但是，知道他们是如何做到这一点的会很有趣。
我对 RN 的了解并不多，但据我从 ReactNative 源代码中可以看出，它支持 TextInput HTML 元素（在库/组件/TextInput 中使用 TextInput.js）和RCTBaseTextInputView 和库/文本/文本输入中的 RCTUITextField），大部分工作都是在 Javascript 端完成的。映射类是 React/Base 中的 RCTConvert。归根结底，我想一切都可以完成，并且取决于您的实现细节以及一些（长期）工作，它可以派生并适应您在 iOS（和/或 Android 上的用例）上的用例，并在纯 Java 上进行额外工作)。
这个答案没有回答问题，但他确实付出了很大的努力并提供了很好的洞察力，所以我将赏金授予@Lookaji。可能没有简单的答案，但如果有人认为他们有答案，我会创建一个新的赏金并让他们回答。

【解决方案2】：

如果您正在寻找一种只允许在输入字段中输入某些字符的方法，那么禁用键盘模式（例如表情符号键盘）并不是最佳选择。输入不需要的字符的方法有很多：可以从剪贴板粘贴，甚至可以在文本替换结果中输入（例如，您可以将 :) 变成?）。

输入验证应该在网页端完成，而不是WKWebView。

【讨论】：

良好的反馈。我要解决的问题是用户的手指很容易滑落，不小心碰到了表情符号按钮。然后弹出表情符号键盘。这在业务应用程序中很烦人。如果我可以对键盘进行细粒度控制，那么我真的可以提高可用性，而不仅仅是摆脱那种烦恼。
“输入验证应该在网页端完成，而不是WKWebView。”，还有第三种选择：两者都做。