iOS Question Code to hide the context menu in WebView

AlfaizDev · May 18, 2025

Code to hide the context menu in webview

I use JavaScript code to hide the menu in b4a and it works fine but it doesn't work in b4i I tried other ways and it doesn't help as some methods disable the selection completely

This is the code I use in b4a

JavaScript:

    document.addEventListener('contextmenu', function(event) {
    event.preventDefault();
}, false);

Erel · May 20, 2025

You are asking about the "copy / select" context menu, right?

I also tried several JavaScript suggestions which didn't work.

AlfaizDev · May 20, 2025

Erel said:
You are asking about the "copy / select" context menu, right?

I also tried several JavaScript suggestions which didn't work.

Yes, I mean it. Thank you.

Sandman · May 20, 2025

Did you try to use this javascript?

JavaScript:

document.documentElement.style.webkitUserSelect='none';
document.documentElement.style.webkitTouchCallout='none';

Or perhaps this css?

CSS:

html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

AlfaizDev · May 20, 2025

Sandman said:
Did you try to use this javascript?

JavaScript:

document.documentElement.style.webkitUserSelect='none'; document.documentElement.style.webkitTouchCallout='none';

Or perhaps this css?

CSS:

html { -webkit-user-select: none; -webkit-touch-callout: none; }

Yes, I've tried this code.
However, the first one completely stops the selection, and I don't want that.
What I want is for the selection to remain intact while preventing the context menu from appearing.
Thank you.

Sandman · May 20, 2025

In that case, isn't this correct?

JavaScript:

document.documentElement.style.webkitTouchCallout='none';

If not, how is it wrong for your scenario?

AlfaizDev · May 20, 2025

Sandman said:
In that case, isn't this correct?

JavaScript:

document.documentElement.style.webkitTouchCallout='none';

If not, how is it wrong for your scenario?

It seems that the code you mentioned is specific to the Safari browser.
Here's a demo page where the menu blocking code doesn't work.

B4X:

    myHtmlString = $"
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Disable Context Menu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background-color: #f5f5f5;
    }
  </style>
</head>
<body>

  <p>
    This is a test paragraph. Try to long-press on this text (on mobile) or right-click (on desktop), and the context menu will not appear.
  </p>

  <script>
    // Disable right-click and long-press context menu
    document.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });

    // Optional: Disable long-press callout on iOS Safari
    document.documentElement.style.webkitTouchCallout = 'none';
  </script>

</body>
</html>
"$
    WebView1.LoadHtml(myHtmlString)

Sandman · May 20, 2025

But isn't the webview based on the Safari engine?

AlfaizDev · May 21, 2025

Sandman said:
But isn't the webview based on the Safari engine?

Almost yes

iOS Question Code to hide the context menu in WebView

AlfaizDev

Well-Known Member

Erel

B4X founder

AlfaizDev

Well-Known Member

Sandman

Expert

AlfaizDev

Well-Known Member

Sandman

Expert

AlfaizDev

Well-Known Member

Sandman

Expert

AlfaizDev

Well-Known Member

Similar Threads