我在 UIWebView 中使用这个技巧来聚焦 contentEditable div。由于 UIWebView 将被弃用(有一天哈哈),我想使用 WKWebView。 我不明白为什么,但是使用 WKWebView,它可以在模拟器上运行,但不能在真实设备上运行。
我设置了一个类,以便您可以复制/过去并查看魔法!
谢谢,
皮埃尔
import UIKit
import WebKit
class StackOverflowViewController: UIViewController {
let html = """
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style>
#editor {overflow: none; display: block; font-family: 'HelveticaNeue'; color: black;font-size: 16px; margin: 0px; padding: 0px;}
#editor:focus { outline: 0px solid transparent; }
img { width: 100%; }
</style>
</head>
<body>
Body here
<div id="editor" contenteditable="true">
</div>
</body>
</html>
"""
var webView: WKWebView!
var button: UIButton!
var textfield: UITextField!
var stackView: UIStackView!
fileprivate func initializeStackView() {
stackView = UIStackView()
stackView.axis = .vertical
stackView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackView)
stackView.topAnchor.constraint(equalTo: self.view.topAnchor).isActive = true
stackView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
stackView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
stackView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
}
fileprivate func initializeButton() {
button = UIButton()
stackView.addArrangedSubview(button)
button.translatesAutoresizingMaskIntoConstraints = false
button.backgroundColor = UIColor.red
button.setTitle("tap on red view to focus webView", for: .normal)
button.setTitleColor(.black, for: .normal)
button.addTarget(self, action: #selector(tapButton), for: .touchUpInside)
}
fileprivate func initializeTextField() {
textfield = UITextField()
textfield.backgroundColor = UIColor.green
textfield.translatesAutoresizingMaskIntoConstraints = false
textfield.heightAnchor.constraint(equalToConstant: 40).isActive = true
textfield.widthAnchor.constraint(equalToConstant: 200).isActive = true
stackView.addArrangedSubview(textfield)
}
override func viewDidLoad() {
self.view.backgroundColor = UIColor.white
initializeStackView()
initializeButton()
initializeTextField()
webView = WKWebView()
stackView.addArrangedSubview(webView)
webView.translatesAutoresizingMaskIntoConstraints = false
webView.heightAnchor.constraint(equalToConstant: 400).isActive = true
webView.widthAnchor.constraint(equalTo: stackView.widthAnchor).isActive = true
webView.loadHTMLString(html, baseURL: nil)
}
@objc func tapButton() {
webView.becomeFirstResponder()
webView.evaluateJavaScript("document.getElementById('editor').focus();")
}
}
我从 Pranit Harekar 添加了这个扩展:Programmatically focus on a form in a webview (WKWebView)
我不需要添加 TextArea,它适用于 contentEditable div!你只需要打电话
webView.keyboardDisplayRequiresUserAction = false