Page had the button which copies text to clipboard with code:

export class ClipboardService {
    static copyToClipboard(toCopy: string) : void {
        document.addEventListener('copy', (e : ClipboardEvent) => {
            e.clipboardData.setData('text/plain', toCopy);
            e.preventDefault();
        });
        document.execCommand('copy');
    }
} 

But after at use, this code Ctrl+C doesn't work. I need removeEventListener something like:

export class ClipboardService {
    static copyToClipboard(toCopy: string) : void {
        document.addEventListener('copy', (e : ClipboardEvent) => {
            e.clipboardData.setData('text/plain', toCopy);
            e.preventDefault();
        });
        document.execCommand('copy');

        document.removeEventListener('copy', (e : ClipboardEvent) => {
            e.clipboardData.??? // I stuck in this place.
        });
    }
}

How to go back to standard behavior for clipboard when text from a specific field copied?

Page had the button which copies text to clipboard with code:

export class ClipboardService {
    static copyToClipboard(toCopy: string) : void {
        document.addEventListener('copy', (e : ClipboardEvent) => {
            e.clipboardData.setData('text/plain', toCopy);
            e.preventDefault();
        });
        document.execCommand('copy');
    }
} 

But after at use, this code Ctrl+C doesn't work. I need removeEventListener something like:

export class ClipboardService {
    static copyToClipboard(toCopy: string) : void {
        document.addEventListener('copy', (e : ClipboardEvent) => {
            e.clipboardData.setData('text/plain', toCopy);
            e.preventDefault();
        });
        document.execCommand('copy');

        document.removeEventListener('copy', (e : ClipboardEvent) => {
            e.clipboardData.??? // I stuck in this place.
        });
    }
}

How to go back to standard behavior for clipboard when text from a specific field copied?

• javascript

• Possible duplicate of event.clipboardData.setData in copy event – Feras Al Sous Commented Aug 14, 2018 at 14:22
• 3 To remove the event listener, save the handler as a seperate function. You have to use the same function in both addEventListener and removeEventListener. const doCopy = (e: .... ) => ... and .addEventListener( 'copy', doCopy ); and .removeEventListener( 'copy', doCopy ); Two functions, even if they have exactly the same code inside, are considered different functions. – Shilly Commented Aug 14, 2018 at 14:27
• @Shilly yes this work, thank You. Plese add your ment as an answer for the adoption. – Pavel Commented Aug 14, 2018 at 14:35

1 Answer 1

The problem is that you're trying to remove the function by writing it again. In JS, two function, even with exactly the same code, are still different functions.

So you need to have a reference to the function to be able to use it in both calls:

export class ClipboardService {
static copyToClipboard(toCopy: string) : void {
    const create_copy = (e : ClipboardEvent) => {
        e.clipboardData.setData('text/plain', toCopy);
        e.preventDefault();
    };
    document.addEventListener('copy', create_copy );
    document.execCommand('copy');
    document.removeEventListener('copy', create_copy );
}

}