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

Question

I'm trying to load a local editable html file onto a WKWebview. WKWebview successfully loads the html file. However, when I start typing into the editable html file, a dark border like view appears around the typed text. This issue is not reproducible on 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>

score 5 · Accepted Answer · answered Aug 12 '19 at 07:18

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

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

    </body>
</html>

Adding outline:none to the div tag solves the issue.

score 1 · Answer 2 · answered Aug 27 '19 at 06:00

Add following code in viewDidLoad

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

I was facing the same problem, above line helped me, it coves the whole page focus elements.

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

2 Answers2