Question

我想控制使用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>

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

我已经做了大量的研究，知道使用文本框上的选项无法完成此操作。我完全希望写修改打开Web视图的代码。

如何修改快速代码以允许我执行此操作？

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

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

到目前为止，我们发现的是：我知道并在应用程序的本机部分中使用了这种技巧： https://stackoverflow.com/a/25861718/1885345

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

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

Answer 1

好挑战！到目前为止，我已经在iPad上对其进行了测试，并通过声明输入字段的pattern使其达到一半的效果（带有警告）：

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

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

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

我尝试捕获UIResponder.keyboardWillShowNotification，但是不返回键盘对象，因为我当时想通过编程方式设置其UIKeyboardType，但是此属性显然只反映了UITextViews。

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

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

编辑：显然，仅将TextInput元素与ReactNative一起使用，您可以将keyboardType直接支撑到ascii-capable iOS键盘上，这将使我们摆脱Emojis的困扰。

Answer 2

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

输入验证应在网页上完成，而不要使用WKWebView。

WKWebView中的自定义键盘

2 个答案: