Copy to clipboard javascript (no jQuery)

Question

I have an Angular 9 app which I need to get a copy to clipboard of url copied when clicked. This is what I have so far:

It copies but not on first attempt only on second attempt is it consoled. Then the clicks stack up so the third click it shows it was clicked 3 times. Why? What am I doing wrong here?

<div id="dd" class="dropdown form-group position-relative col-12 col-md-6 save-dialog__form-group">
      <label for="dropdown" class="col-6 col-md-3 editor-wrapper__label">Select Image:</label>
      <div class="col-6 col-md-9">
        <a data-flip="false" data-boundary="dd" href="#" class="dropdown-toggle" data-toggle="dropdown">Images</a>
        <ul class="dropdown-menu dropdown-menu-down dropdown-menu-right">
          <li id="{{ 'image-copy-' + i }}" (click)="copyToClipboard($event)" *ngFor="let availableImage of imageOptions; let i = index" class="image-option line-item">
            <div class="image">
              <img src="{{ availableImage.relLink }}" />
            </div>
            <div class="mark-down example raw-code">
              {{ availableImage.markDown }}
            </div>
          </li>
        </ul>
      </div>
    </div>

    copyToClipboard(event) {
    var lineItem = document.getElementsByClassName('line-item');
    var lineItemLength = lineItem.length;
    for (var i = 0; i < lineItemLength; i++) {
      lineItem[i].addEventListener('click', function () {
        console.log(this.id);
        var el = document.getElementById(this.id);
        el.setAttribute('contenteditable', 'true');
        el.focus();
        document.execCommand('selectAll');
        document.execCommand('copy');
        el.setAttribute('contenteditable', 'false');
        el.blur();

      }, false);

    }
  }

Honestly what you are doing is memory killer. On each `li` element you have a `(click)` event handler. This handler in turn creates another handler for every `li` element. So each time you click, you repeatedly add event handlers. So for starters, remove the `(click)` handler, and call `copyToClipboard` from your code after the DOM is ready. — Benny Halperin, Apr 10 '20 at 18:48
The best practice is to go with `(click)` handler and rewrite `copyToClipboard` — Benny Halperin, Apr 10 '20 at 18:54
Do you have an example? I have tried a few things today to no avail. — user2025730, Apr 13 '20 at 16:30
remember to apply ios fix https://stackoverflow.com/a/41267511/28004 — balexandre, Apr 13 '20 at 17:20
@user2025730 what exactly do you wish to copy to the clipboard? I can post here an example in Angular, using a simple service, that is generic and can take any text and copy it to the clipboard. — Benny Halperin, Apr 13 '20 at 18:33
This editor does not need to work on mobile. This is for a very beginner type company. No cms was used therefore they need a developer to maintain. The idea for this editor is to have it password protected but easy to create news articles which get into a json file for the site to use and display article. — user2025730, Apr 15 '20 at 22:25
@Benny I needed to copy the path to the image for the content editor. like this ```![image](https://dummyimage.com/30x30/4B0082/000.png&text=Image+1)``` — user2025730, Apr 15 '20 at 22:26

score 1 · Accepted Answer · answered Apr 13 '20 at 17:17

I was able to resolve this issue by using the code below:

copyToClipboard(event) {
    var target = event.target || event.srcElement || event.currentTarget;

    target.setAttribute('contenteditable', 'true');
    target.focus();
    document.execCommand('selectAll');
    document.execCommand('copy');
    target.setAttribute('contenteditable', 'false');
    target.blur();
  }

Copy to clipboard javascript (no jQuery)

1 Answers1