php Question posted in
Official manual can be found here.

Php – How to disable copy/paste and/or right-clicking on a specific word?

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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 {
  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' );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search