How do i...how to display DIV after 30 seconds on copy text content on web page?

Question

1.00/5 (1 vote)

See more:

I have a div tag that I want to display 30 secons after copying content on a web page, below is the code.
Content To Be Copied:

<div class="copy">Copy This Conent</div>

Div Tag To DIsplay After 30sec of Copying:

<div id="dsply">The Content Has Been Copied</div>

A good solution to this will be appreciated.

What I have tried:

I have been able to solve the display after 30 secons using js:

$(function(){

    $('#dsply').hide();

    setTimeout(function(){
        $('#dsply').fadeIn('slow');
    },30000);

});

But I actually want this to display 30 secons after copying web page content.

Posted 2-Feb-20 10:54am

cHl Security

Updated 3-Feb-20 10:09am

Add a Solution

Comments

ZurdoDev 3-Feb-20 8:16am

After someone presses Ctrl+C or do you have a button that the user will click to copy?

cHl Security 3-Feb-20 10:18am

AFter someone press ctrl+c or right clicking, select then copy. More so I would appreciate if you and also help me in vice vera on how to make a dive disappear 30 secs after copy event occured. Best Regards.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

DerekT-P · Answer 1 · 2020-02-03T10:10:00

Use the oncopy event of your document. This event is fired when the user copies content by pressing Ctrl-C, by using the context menu and choosing Copy, or when using the browser window menu and choosing edit/copy.

So all you need do is call your function in response to that event:

JavaScript

document.oncopy =$(function(){

    $('#dsply').hide();

    setTimeout(function(){
        $('#dsply').fadeIn('slow');
    },30000);

});

Read more about clipboard events, including cancelling them, accessing clipboard data etc at https://www.w3.org/TR/clipboard-apis/#clipboard-event-copy[^]