在 iOS13 上编辑加载到 WKWebview 上的 HTML 文件时 html 内容的边框

Question

我正在尝试将本地可编辑 html 文件加载到 WKWebview。 WKWebview 成功加载 html 文件。但是，当我开始在可编辑的 html 文件中键入内容时，键入的文本周围会出现类似视图的深色边框。此问题无法在 iOS12.

上重现

(void)viewDidLoad
{
    [super viewDidLoad];
    NSBundle *bundle = [NSBundle mainBundle];
    NSURL *indexFileURL = [bundle URLForResource:@"index" withExtension:@"html"];
    [self.wkWebView loadRequest:[NSURLRequest requestWithURL:indexFileURL]];
}

index.html:

<html>
    <body>
        <div id="content" contenteditable="true" style="font-family: Helvetica"> Type here </div>
    </body>
<html>

Answer 1

<html>
    <head>
    <style type="text/css">
        div {
        outline: none
            }
            </style>
    </head>
    <body >

    <div contenteditable="true">Type here</div>

    </body>
</html>

将 outline:none 添加到 div 标签可以解决问题。

Answer 2

在viewDidLoad中添加如下代码

[self.wkWebView stringByEvaluatingJavaScriptFromString:@"var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = '*:focus{ outline:none }'; document.getElementsByTagName('head')[0].appendChild(style);"];

我遇到了同样的问题，上面这行帮助了我，它涵盖了整个页面的焦点元素。

在 iOS13 上编辑加载到 WKWebview 上的 HTML 文件时 html 内容的边框

Border around html content on editing a HTML file loaded onto a WKWebview on iOS13

webkit

objective-c

ios

wkwebview

ios13