Madogiwa Blog

主に技術系の学習メモに使っていきます。

JavaScriptでhidden等の画面に表示されてない任意の文字列をクリップボードにコピーさせる方法

JavaScriptクリップボードにコピーさせる方法として、select()して、document.execCommand("copy")を呼び出すことで、要素を選択してクリップボードへのコピーコマンドを呼び出す方法を採用することが多いと思うのですが、

async function clipboardCopy(selector) {
  const target = document.querySelector(selector);
  target.select();
  document.execCommand("copy");
}

この方法では明示的に画面上の項目を選択してコピーを行う都合上、hiddenタグの値等、画面に表示されていない値を取得することはできません。

そういうときにはnavigator.clipboard.writeTexを使うと任意の文字列をコピーさせることができます。

developer.mozilla.org

サンプルはこんな感じです。

async function clipboardCopy(text) {
  await navigator.clipboard.writeText(text);
}

clipboardCopy("コピー対象の文字列")

Clipboard API、今まで知らなかったのですが便利ですね✨

参考

qiita.com

developer.mozilla.org