复制到剪贴板javascrip（无jQuery）

Question

我有一个角9应用程序，我需要得到一个复制到剪贴板的url复制时，点击。这是我目前所掌握的：

它复制，但不是在第一次尝试，只有在第二次尝试，它是安慰。然后点击叠加，所以第三次点击显示它被点击了3次。为什么？我在这里做错了什么？

<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);

    }
  }

Answer 1

我能够通过使用下面的代码来解决这个问题：

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();
  }