文字列コピーのテスト

1. このページの目的

画面上の文字列をクリップボードにコピーする。

2. Clipboard API and events を利用する方法

Clipboard API and events を利用するやり方

(1) テキストフィールド内の文字列をコピーする

以下に貼り付けて確かめる

コード

HTML

<input type="text" id="txt1" value="foobar1" />
<button id="btn1" class="button">copy</button>

JavaScript

const btn1 = document.querySelector('#btn1');
btn1.addEventListener('click', function() {
  const txt1 = document.querySelector('#txt1')
  navigator.clipboard.writeText(txt1.value)
});

(2) <p> の内容をコピーする

foobar2

以下に貼り付けて確かめる

コード

HTML

<p id="para2">foobar2</p>
<button id="btn2" class="button">copy</button>

JavaScript

const btn2 = document.querySelector('#btn2');
btn2.addEventListener('click', function() {
  const p2 = document.querySelector('#para2');
  navigator.clipboard.writeText(p2.innerHTML)
});

参考

ブラウザの対応状況

3. Selection API を利用する方法

Selection API を利用する。

foobar3

以下に貼り付けて確かめる

コード

HTML

<p id="para3">foobar3</p>
<button id="btn3" class="button">copy</button>

JavaScript

const btn3 = document.querySelector('#btn3');
btn3.addEventListener('click', function() {
  const element = document.querySelector('#para3'),
    selection = window.getSelection(),
    range = document.createRange();
  range.selectNodeContents(element);
  selection.removeAllRanges();
  selection.addRange(range);
  const succeeded = document.execCommand('copy');
  if (succeeded) {
      // do nothing
  } else {
      console.error('コピーが失敗しました!');
  }
  selection.removeAllRanges();
});

参考

4. 結論