Блог

Я пытаюсь разрешить пользователю выбирать абзац и копировать его, когда он/она нажимает кнопку. В настоящее время мой код выглядит так, но он не выделяет текст и не копирует его. Я попытался импортировать директивы, но это приводило к ошибкам во время процесса импорта, поэтому я воспользовался приведенным ниже методом. Что не так с моим кодом?

HTML:

 <p>
  <span
    id="sticker"
    contenteditable
    [textContent]="_stickerData?.StickerData"
    (input)="onStickerDataChange($event.target.innerHTML)"
  >
    {{_stickerData?.StickerData}}
  </span>
</p>
<button
  mat-button
  id="btnCopy"
  matRipple
  class="purple-500 fuse-white-fg mr-12"
  (click)="copyText()"
>
  Copy
</button>
 

тс:

 copyText() {
  const sticker = document.getElementById("sticker");
  const btnCopy = document.getElementById("btnCopy");

  btnCopy.onclick = () => {
    document.querySelector("sticker");
    document.execCommand("copy");
  };
  this._messages.Show("Copied", "SUCCESS", 3);
}

 

Пожалуйста, измените свой код на этот:

 copyText(value: string) {
    const selBox = document.createElement('textarea');
    selBox.style.position = 'fixed';
    selBox.style.left = '0';
    selBox.style.top = '0';
    selBox.style.opacity = '0';
    selBox.value = value;
    document.body.appendChild(selBox);
    selBox.focus();
    selBox.select();
    document.execCommand('copy');
    document.body.removeChild(selBox);

    this._messages.Show("Copied", "SUCCESS", 3);
} 

и html нужно немного изменить вместе с ним:

  <button mat-button id="btnCopy" matRipple class="purple-500 fuse-white-fg mr-12" (click)="copyText(_stickerData?.StickerData)">Copy</button> 

Я думаю, что это сработает в вашем случае 😀

Что делает эта функция? Просто: он создает невидимую текстовую область, копирует значение и в конце концов уничтожает его