OnengLar
OnengLar

Reputation: 938

PreventDefault text selection context menu on mobile in browser

How to disable context text selection menu in browser? Is it possible?

This is how text-selection-menu is look like:

enter image description here

Upvotes: 9

Views: 3462

Answers (4)

Programmerabc
Programmerabc

Reputation: 327

Another anwser on requirement of @OnengLar. Here is just a small trick to do that using js and html.

function clicked(event){
  event.preventDefault();
  //Custom popup here
  alert('Right clicked me');//For now just showing an alert
}
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<span oncontextmenu="clicked(event);">Select me and see my different behaviour</span>
</body>
</html>

Upvotes: 3

Programmerabc
Programmerabc

Reputation: 327

It very simple you just need to add user-select attribute in the css class. Here is a small code with p and span as tag as unselectable.

p{
  user-select: none;
}

span{
  user-select:none;
}
<html>
  <head>
      <meta charset="utf-8">
  </head>
  <body>
  <!--Full text is unselectable-->
  <p>This full text is unselectable</p>
  
  <!--A part of text is unselectable-->
  <div>Hello i am selectable but i am <span>unselectable.</span></div>
  </body>
</html>

Upvotes: 3

dreamLo
dreamLo

Reputation: 1860

You can disable the contextmenu event so users can't interact with your page. You can enable this document wide or only on some elements.

document.addEventListener('contextmenu', event => {
  event.preventDefault()
})
<div>Some text that you can't right click or touch interact with</div>

Upvotes: -2

jDoe
jDoe

Reputation: 123

The search function in your browser jsut searches for the specific string and then selects the text. You can use the user-select CSS-Property to change the behaviour of selected text. There is no other possibility for this. But you should check carefully if its compatible with your needed browsers and operating systems.

https://caniuse.com/?search=user-select

Upvotes: -1

Related Questions