Disable date actions in iOS WKWebView

Question

I have a time slot picker web component on a page that is shown with WKWebView in an iOS app.

iOS recognises that the given text is a date an offers actions when you click on the date.

Is there any way to disable that? Either by changing the HTML code or configuring the iOS WKWebView instance?

HTML code:

<header class="cSlot-dates-selector svelte-kvfxh4">
    <div class="cSlot-day svelte-10whff3 today">
        <span class="cSlot-date-name svelte-10whff3">Thu</span> 
        <span class="cSlot-date-nb svelte-10whff3">29 Jul</span>
    </div>
    <div class="cSlot-day svelte-10whff3">
        <span class="cSlot-date-name svelte-10whff3">Fri</span>
        <span class="cSlot-date-nb svelte-10whff3">30 Jul</span>
   </div>
   //...
</header>

If you press next, the HTML is updated and the action will not appear anymore.

CTABUYO CTABUYO · Accepted Answer · 2021-07-29T15:57:55

You can use the following JavaScript code to 'override' so to speak the HTML and disabling long presses and link touches:

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    webView.evaluateJavaScript("document.documentElement.style.webkitUserSelect='none'")
    webView.evaluateJavaScript("document.documentElement.style.webkitTouchCallout='none'")
    webView.evaluateJavaScript("var elems = document.getElementsByTagName('a'); for (var i = 0; i < elems.length; i++) { elems[i]['href'] = 'javascript:(void)'; }")
}

Disable date actions in iOS WKWebView

1 Answers