Copy to clipboard angular, not working on safari

Question

Hi I have a directive that copies to the clipboard. But my friend told me that it didn't work on safari(Works on chrome etc). I have no way of testing this. So I hope you guys could help me! :)

My Directive looks like this:

import { Directive, Input, Output, EventEmitter, HostListener } from '@angular/core';

@Directive({ selector: '[CopyToClipboard]' })
export class CopyClipboardDirective {

    @Input('CopyToClipboard')

    public payload: string;

    @Output('copied')

    public copied: EventEmitter<string> = new EventEmitter<string>();

    @HostListener('click', ['$event'])

    public onClick(event: MouseEvent): void {
        event.preventDefault();

        if (!this.payload) {
            return;
        }

        const listener = (e: ClipboardEvent) => {
            const clipboard = e.clipboardData || window['clipboardData'];
            clipboard.setData('text', this.payload.toString());
            e.preventDefault();
            this.copied.emit(this.payload);
        };

        document.addEventListener('copy', listener, false);
        document.execCommand('copy');
        document.removeEventListener('copy', listener, false);

    }
}

How can I make it work on Safari? I have no experiences on working with Safari.

Expected result: "Copy the input to clipboard"

Errors: "None, that I know of, it runs through but does not copy the input"

Why it's not a duplicate is because I'm not using a input. I have a string value that is suppose to arrive as an input in the directive.

Possible duplicate of [Javascript Copy To Clipboard on safari?](https://stackoverflow.com/questions/40147676/javascript-copy-to-clipboard-on-safari) — sevic, Jul 16 '19 at 09:00
Checked that and I wasn’t sure how to implement it in my case, since i can’t test it — LittleMygler, Jul 16 '19 at 09:02

score 0 · Answer 1 · answered Aug 23 '22 at 07:25

For someone who still struggling with this question, I found following approach working — we could use in this directive additional if statement to add block with solution for Safari from the similar question https://stackoverflow.com/a/60420392/1362723.

It might looks like this:

public onClick(event: MouseEvent): void {
    event.preventDefault();

    if (!this.payload) {
        return;
    }
    // you could choose isSafari implementation that you like
    // for example that one https://stackoverflow.com/a/23522755/1362723
    if (this.isSafari()) {
        const el = document.createElement('textarea');
        el.value = this.payload;
        document.body.appendChild(el);
        el.select();
        document.execCommand('copy');
        document.body.removeChild(el);
    }
    else 
    {
        const listener = (e: ClipboardEvent) => {
        const clipboard = e.clipboardData || window['clipboardData'];
        clipboard.setData('text', this.payload.toString());
        e.preventDefault();
        this.copied.emit(this.payload);
    };

    document.addEventListener('copy', listener, false);
    document.execCommand('copy');
    document.removeEventListener('copy', listener, false);
}

Copy to clipboard angular, not working on safari

1 Answers1