JSでクリップボードにコピーするボタンの実装（ClipboardAPI＋clipboardData）

document.execCommand("copy"); は既に非推奨になっている。
代替手段としてモダンブラウザではHTML5のClipboard APIを、IE対応ではwindow.clipboardDataを使う。

Clipboard APIを使う（IE以外のブラウザ）

navigator.clipboard.writeText()

navigator.clipboard.writeText("text").then(function() {
  // clipboard successfully set
}, function() {
  // clipboard write failed
})

IE以外は大体対応している。
Firefoxはユーザーイベントによってしか発火しないらしい。
今回はボタンクリックで発火させるので大丈夫。

window.clipboardDataを使う（IE）

window.clipboardData.setData('Text', 'some text here'); // copy

組み合わせる

const copy = () => {

  // touchイベント対応
  const clickEventType = ((window.ontouchstart !== null) ? 'click' : 'touchend')
  // link指定
  const link = 'https://qiita.com/'
  // btn取得 .c-btn--copy
  const _btns = document.getElementsByClassName('c-btn--copy')
  for (let i = 0; i < _btns.length; i++) {
    const btn = _btns[i]
    btn.addEventListener(clickEventType, function () {
      if(navigator.clipboard !== undefined) {
        // Clipboard APIが使用可能な場合
        window.clipboardData.setData('Text', link);
      }else{
        // 使用不可な場合
        navigator.clipboard.writeText(link).then(e => {
          console.log('copied ', link)
        })
      }
    })
  }
}