时间戳

首页 > 解决方案 > WKWebView 中的自定义键盘

ios - WKWebView 中的自定义键盘

问题描述

我想控制使用 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 的代码。

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

理想情况下，我可以定义多个键盘并允许 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

标签： iosswiftkeyboardwkwebview

解决方案

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

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

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

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

我试过捕捉UIResponder.keyboardWillShowNotification但不返回键盘对象，因为我想以编程方式设置它的 UIKeyboardType ，但这个属性显然只反映 UITextViews 。

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

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

编辑：显然只使用带有ReactNative的TextInput元素，您可以直接支持iOS 键盘，这将使我们摆脱 Emojis。keyboardTypeascii-capable

推荐阅读