0

I'm working on a school assignment where I'm attempting to increase the visibility of Ctrl + c and Ctrl + p. My goal, right now, is to show what text has been copied in a second textarea. The code I have 'works' but it's not ideal.

Here is my code (which I have gotten from here and here):

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Ctrl+c Ctrl+v allowed</h3>
<textarea></textarea>
<br>
<br>
<h3>Clipboard</h3>
<textarea id="clipBoard"></textarea>

<script>
    $(document).ready(function() {
        var ctrlDown = false,
            ctrlKey = 17,
            cmdKey = 91,
            vKey = 86,
            cKey = 67;

        $(document).keydown(function(e) {
            if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = true;
        }).keyup(function(e) {
            if (e.keyCode == ctrlKey || e.keyCode == cmdKey) ctrlDown = false;
        });     

        // Document Ctrl + C/V 
        $(document).keydown(function(e) {

            var clip = document.getElementById("clipBoard");
            if (ctrlDown && (e.keyCode == cKey))
            {
                navigator.clipboard.readText()
                .then(text => {
                    clip.value = text;
                })
                .catch(err => {

                });
                console.log("Document catch Ctrl+C");

            }
            if (ctrlDown && (e.keyCode == vKey)) 
            {
                console.log("Document catch Ctrl+V");
            }
        });
    });
</script>

There are 2 problems with this solution.

First, the webpage asks for permission to copy. I understand the need for this, but is there a way to get around this?

Second, if a user says no then I can't display the clipbaord text when there is something in the clipboard which would just ruin the assignment.

Is there a way to get around these problems?

Thanks!

GreenSaber
  • 1,118
  • 2
  • 26
  • 53

1 Answers1

1

No. You can use older technologies like execCommand to paste the clipboard contents into a focused textbox, but that requires actually pasting it and is outdated. The modern Clipboard API requires user permission for a very good reason (imagine if you copied, say, a porn URL or a bank account number, and a website could get that info without anyone knowing) -- trying to bypass permission requirements for APIs that require it is not good. If this is for a school assignment, I see no reason your teacher or whoever is grading you wouldn't give the browser permission to use the Clipboard API when they've asked you to get clipboard contents.

IceMetalPunk
  • 5,476
  • 3
  • 19
  • 26
  • Ya I totally understand the purpose for permission. This is a UI class, so I would have permission to the clipboard but I have to account for the user pressing no or being annoyed by the prompt every time. This is unfortunate, might have to pick something else for this assignment. Thanks though! – GreenSaber Oct 23 '19 at 15:41
  • If the user presses No, it means they don't want you reading their clipboard; you can `.catch` that on the end of your promise chain and show a message like "You said we can't read your clipboard, so this app will not function. Sorry." or something. – IceMetalPunk Oct 23 '19 at 15:45
  • Is there a way I can get permission just once and display clipboard data from then on? – GreenSaber Oct 23 '19 at 16:00
  • That's how it should already work, until you reload the page or go to a different URL. – IceMetalPunk Oct 23 '19 at 16:59
  • Oh really? Right now it's prompting me every time I press `Ctrl + c` – GreenSaber Oct 23 '19 at 17:03
  • What browser are you using? – IceMetalPunk Oct 23 '19 at 17:06
  • I'm using Chrome – GreenSaber Oct 23 '19 at 17:07
  • Are you running the page locally (i.e. with the `file://` protocol instead of, for instance, `http://`)? If so, that's why; local files don't remember permissions. If you run it from a server (even a local server like VSCode's Live Server extension), it will remember after the first time. – IceMetalPunk Oct 23 '19 at 17:20
  • I am running the code locally because I have to hand it in in a format that anyone can access it from anywhere (annoying hand in requirements). Can I achieve this locally? – GreenSaber Oct 23 '19 at 17:24
  • If you want it to remember permissions, it needs to be on a server. If you can't be sure the user can host it on their own local server, you'll need to put it on a web host somewhere and give them the URL. – IceMetalPunk Oct 23 '19 at 17:27