Disable copy/paste

Ask the community
1

Heyyy :slight_smile:
I would like to be able to disable copy paste on certain text fields of my site (Rich text fields) and I don’t really know how to do it

I found relevant script which here is a link, but I don’t understand how to do it when it comes to interacting with softr

Ideas ? THANKS :pray:

2

Hi Lea,
Here is an other code that could help you to do it

<script>
const richTextFields = document.querySelectorAll(".rich-text");

richTextFields.forEach(field => {
  field.addEventListener("contextmenu", function(event) {
    event.preventDefault();
  });
});

</script>

The key is to find the right element(s?) to replace .rich-text. So if you have a page to share or find something which seems relevant to you in the inspector…

2 Likes
3

Thanks Matthieu ! Can I replace .rich-text with the css tag? Just tried with this one and not working. In the inspector its select all the rich text field. Not live in my demo app sorry but I can try to share a demo app (app alive isn’t public until now)

CleanShot 2023-02-04 at 14.34.32@2x
CleanShot 2023-02-04 at 14.34.32@2x1508×762 152 KB

4 
<script>
const elements = document.querySelectorAll('.css-xxxx');

elements.forEach(element => {
  element.addEventListener("contextmenu", function(event) {
    event.preventDefault();
  });
});
</script>

Or this one

<script>
document.querySelectorAll('.css-xxxx').forEach(function(element) {
  element.oncontextmenu = function() {
    return false;
  };
});
</script>

Should be in the header custom code
Though I’m a little confused to know if const “elements” is ok… :thinking:
Also it depends on the number of rich text elements who has the same class, as css-1cmeorz can appear multiple times, like buttons of a cta :grin: (or maybe not)…

5

I know you didn’t ask for this sort of question, but why do you want to disable copy/paste? Users generally hate that.

6

@dcoletta I want a very special product, which corresponds to a platform that pays for access to pdfs. I want to allow my users to preview the content in a web way, I would like to be able to prevent from copy paste too easy. I know that the content will not be completely protected, but already if I make the task more difficult for new users it is a good thing :slight_smile:

@matthieu_chateau also tried, don’t work mmhh hard task :confused:

7

Again, tell me to stop if this isn’t helpful, but I would strongly suggest a different strategy. For example, remove every 10th word, or insert random text, or something. But trying to make your user not be able to do something for which they might have a totally legitimate purpose — for example copying and pasting to share with the person approving the purchase — is not only ineffective but also reduces likelihood of conversion (in my humble opinion).

8

I completely agree for the web in general, but in my specific case it is important

9

I succeeded using this code

        .iframe-container {
    pointer-events: none;
  }

    <div class="iframe-container">
    <iframe src="" id="iframeMobile" width="80%" height="10000" allowfullscreen ="" style="margin: auto;"></iframe>
    </div>

To prevent the web page scroll bug I set the height of the iframe to 10000px, it’s a bit elementary but it works :slight_smile: thanks to you two

Any idea how I could change the height of the iframe based on the height of the webpage it’s displaying?

10

It’s an unconventional method I would say :sweat_smile:.

Are you sure you don’t want to share a screenshot of the block where the rich text field appears? You can hide labels if you want, I just want to reproduce it on my end, then I will be able, hopefully, to get the right element. That way you won’t have to use an Iframe.
Or describe me the block you use, what are the fields inside of it.

Here is a code that may work:
Replace “myIframe” by the id of your iframe (“iframeMobile”)

<script>
document.getElementById("myIframe").onload = function() {
  this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
};
</script>

So It should be this:

<div class="iframe-container">
  <iframe src="" id="iframeMobile" width="80%" height="10000" allowfullscreen="" style="margin: auto;"></iframe>
</div>

<script>
document.getElementById("iframeMobile").onload = function() {
  this.style.height = this.contentWindow.document.body.scrollHeight + 'px';
};
</script>