JavaScript Copy To Clipboard Example

copy-to-clipboard.ts

  copy() {
    try {
      if ((navigator as any).clipboard) {
        (navigator as any).clipboard.writeText(this.couponCode);
      } else if ((window as any).clipboardData) {  // IE
        (window as any).clipboardData.setData('text', this.couponCode);
      } else {  // other browsers, iOS, Mac OS
        this.copyToClipboard(this.inputEl.nativeElement);
      }
      this.tooltipText = 'Copied to Clipboard.';  // copy succeed.
    } catch (e) {
      this.tooltipText = 'Please copy coupon manually.';  // copy failed.
    }
  }

  private copyToClipboard(el: HTMLInputElement) {
    const oldContentEditable = el.contentEditable;
    const oldReadOnly = el.readOnly;

    try {
      el.contentEditable = 'true';  // specific to iOS
      el.readOnly = false;
      this.copyNodeContentsToClipboard(el);
    } finally {
      el.contentEditable = oldContentEditable;
      el.readOnly = oldReadOnly;
    }
  }

  private copyNodeContentsToClipboard(el: HTMLInputElement) {
    const range = document.createRange();
    const selection = window.getSelection();
    range.selectNodeContents(el);
    selection.removeAllRanges();

    selection.addRange(range);
    el.setSelectionRange(0, 999999);

    document.execCommand('copy');
  }