説明

今回は Clipboard オブジェクトを使用します。このオブジェクトはテキストのコピーや切り取り、ペーストを行う事が出来ます。
もう少し厳密に言うとクリップボードとのやりとりをしてくれるオブジェクトになります。

文字のクリップボードへの保持

まず初めに Clipboard オブジェクト使用して固定文字をクリップボードへ保持します。clipboardプロパティが Clipboard オブジェクトを返却し、writeTextメソットを実行するとクリップボードへ引数で指定された文字が保持されます。

HTML

<body>
  <button onclick="sample()">コピー</button>
</body>

javascript

function sample() {
  navigator.clipboard.writeText('sample');
}

結果

ボタンを押すとテキストエディタなどへ”sample”という文字がペースト出来るようになるはずです。

先ほどは”sample”という固定文字でしたがgetElementByIdメソッドを使用して特定の要素からテキストの内容を取得します。

HTML

<body>
  <div id="test">sample_text</div>
  <button onclick="getIdText('test')">クリック</button>
</body>

javascript

function getIdText(id) {
  let element = document.getElementById(id);
  console.log(element.textContent);
}

結果

ボタンを押すとコンソールログに “sample_text” が表示されるはずです。

sample_text

今までの内容から、指定した特定のIDの要素内のテキストをコピーする関数を作成します。

HTML

<body>
  <div id="test">sample_sample</div>
  <button onclick="setTestToClipboard('test')">コピー</button>
</body>

javascript

function setTestToClipboard(id) {
  let element = document.getElementById(id);
  navigator.clipboard.writeText(element.textContent);
}

結果

ボタンを押すと文字がテキストエディタなどに”sample_sample”という文字がペースト出来るはずです。

sample_sample

特にありません。