javascript - How to disable copypaste andor right-clicking on a specific word? - Stack Overflow

admin管理员组

文章数量:1122832

I want to protect from copy and paste/right-clicking only the content of this custom field:

$cin = esc_html__(get_post_meta( $post->ID, 'cin_code', true), 'sacconicase');

Up to now I found solutions only for the entire site content, such as this java, to be put in js folder

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

I tryed doing

if ( ! empty( $cin)) {  

$cin = '<div class="not-clickable">'. $cin .'</div>';
} 

and than by css the "pointer-events: none" to that class but it's not working

I want to protect from copy and paste/right-clicking only the content of this custom field:

$cin = esc_html__(get_post_meta( $post->ID, 'cin_code', true), 'sacconicase');

Up to now I found solutions only for the entire site content, such as this java, to be put in js folder

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

I tryed doing

if ( ! empty( $cin)) {  

$cin = '<div class="not-clickable">'. $cin .'</div>';
} 

and than by css the "pointer-events: none" to that class but it's not working

• javascript
• php
• html

Share Improve this question Follow edited Nov 22, 2024 at 11:35 ADyson 61.6k1515 gold badges6969 silver badges8585 bronze badges Recognized by PHP Collective asked Nov 22, 2024 at 10:38 Andrea SacconiAndrea Sacconi 1333 bronze badges 1

• 1 @yogi just an alphanumeric code, but the purpose is not a full protection, just a disincentive to put it on google. Now the law in Italy requires owners and platforms that deal with short-term vacation rentals to put an identification code for each accommodation, so the user will use this new code to see the same accommodation on the internet on all the sites where it is displayed, it will be a sort of price comparator – Andrea Sacconi Commented Nov 22, 2024 at 13:01

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 2

Your PHP code looks correct in adding the wrapper around your text. I'm not sure what CSS you had tried adding, but below is the working client-side component. As you can see, the user cannot select the text or open the context menu on it, but is still able to open the context menu on the rest of the page.

Note: If you use pointer-events: none;, the JavaScript will not be able to determine the user has right clicked on the specified element and will display the context menu.

Breakdown: Rather than selecting the entire document, select only elements with the class not-clickable. Using querySelectorAll rather than an ID means you can add the not-clickable class to multiple elements to deter users from copying sensitive text in other instances as well.

document.addEventListener('DOMContentLoaded', function() {
  const protectedElements = document.querySelectorAll('.not-clickable');
  protectedElements.forEach(el => {
    el.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });
  });
});

.not-clickable {
  -webkit-user-select: none; // safari support
  user-select: none;
}

<div class="not-clickable">Here is the protected content being dynamically generated. </div>

---

Edit:

the event listerner should be placed in my js folder inside my theme? the js file must have a specific name? – Andrea Sacconi

Adding the JavaScript to your page.

I'm assuming your using WordPress because you used get_post_meta, so here is a breakdown of where to add the JavaScript:

1. In your theme folder, navigate to the js directory (create it if it doesn't exist)

2. Create a file called not-clickable.js and paste the JS code into it

3. Add this PHP to your themes functions.php file:

function enqueue_custom_protection_script() {
    wp_enqueue_script(
        'not-clickable', // unique name
        get_template_directory_uri() . '/js/not-clickable.js', // path to file
        array(),
        null,
        true
    );
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_protection_script' );

You can disable right clicking on a specific element by setting the event listener on it, instead of the entire document:

document.getElementById('two').addEventListener('contextmenu', function(e){
    e.preventDefault();
});

This targets an element with the id "two" and will disable the context menu on it with e.preventDefault();

Your next step is to prevent users from selecting the text. This way they can't copy paste it. You can use CSS to achieve this:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

Even when someone uses Ctr+A in an attempt to select everything, it'll still not select the element where you use the CSS code on.

Finally, a working example where you cannot right click the red element and cannot select the text inside it:

document.getElementById('two').addEventListener('contextmenu', function(e){
    e.preventDefault();
});

div {
  width: 100%;
  height: 50px;
}
#one {
  background-color: #0000ff;
}
#two {
  background-color: #ff0000;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#three {
  background-color: #00ff00;
}

<div id="one">
One
</div>
<div id="two">
Two
</div>
<div id="three">
Three
</div>

本文标签： javascriptHow to disable copypaste andor rightclicking on a specific wordStack Overflow