【javascript】テキストをコピーするクリップボード(clipboard) APIの使い方

投稿日 : 2022年03月18日 更新日 :

execCommandは非推奨

document.execCommand("copy");

クリップボードAPIの書き方

navigator.clipboard.writeText("copy")

  <div class="input-container">
    <input type="text" id="copyText" placeholder="入力してください。" />
    <button onclick="copyToClipboard(this)">
      Copy Text
    </button>
  </div>

  async function copyToClipboard(obj) {
    const element = obj.previousElementSibling;
    // クリップボードAPIが使え、且つ、値が空でない時
    if (navigator.clipboard && !element.value == false) {
      await navigator.clipboard.writeText(element.value);
      alert("コピーされました！");
    } else {
      alert("コピーされませんでした！");
    }
  }

参考

【javascript】親要素、子要素、兄弟要素を取得する

【javascript】onclickの書き方と使い方 クリックした値を取得する

コピーされたかの判定

  async function copyToClipboard(obj) {
    // 兄要素を取得
    const element = obj.previousElementSibling;
    if (navigator.clipboard && !element.value == false) {
      await navigator.clipboard.writeText(element.value);
      obj.textContent = "Copied";
      obj.style = "background: blue;";
      setTimeout(resetBtn, 2000);
    } else {
      obj.textContent = "Could not copy!";
      obj.style = "background: red; font-size: 14px";
      setTimeout(resetBtn, 2000);
    }
    function resetBtn() {
      obj.textContent = "Copy Text";
      obj.style = "background: #533eff;";
    }
  }

value以外の値を取得

  async function copyToClipboard(obj) {
    const element = obj.previousElementSibling;
    if (navigator.clipboard && !element.textContent == false) {
      await navigator.clipboard.writeText(element.textContent);
      obj.textContent = "Copied";
      obj.style = "background: blue;";
      setTimeout(resetBtn, 2000);
    } else {
      obj.textContent = "Could not copy!";
      obj.style = "background: red; font-size: 14px";
      setTimeout(resetBtn, 2000);
    }
  }

まとめ