Reputation: 938
How to disable context text selection menu in browser? Is it possible?
This is how text-selection-menu is look like:
Upvotes: 9
Views: 3462
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
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
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
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