I'm using this trick with UIWebView to focus an contentEditable div. Since UIWebView will be deprecated (one day haha), I want to use WKWebView. I don't understand why, but with WKWebView, it works on a simulator, but not with real devices.
I put a class so you can copy/past and see the magic !
Thanks,
Pierre
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();")
}
}
I added this extension from Pranit Harekar: Programmatically focus on a form in a webview (WKWebView)
I didn't needed to add TextArea, it works with a contentEditable div! you just need to call
webView.keyboardDisplayRequiresUserAction = false
