如何在JavaScript中将文本复制到剪贴板

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement('textarea')
  textArea.value = text

  // 避免滚动到底部
  textArea.style.top = '0'
  textArea.style.left = '0'
  textArea.style.position = 'fixed'

  document.body.appendChild(textArea)
  textArea.focus()
  textArea.select()

  try {
    var successful = document.execCommand('copy')
    var msg = successful ? 'successful' : 'unsuccessful'
    console.log('Fallback: Copying text command was ' + msg)
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err)
  }

  document.body.removeChild(textArea)
}

function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text)
    return
  }
  navigator.clipboard.writeText(text).then(
    function () {
      console.log('Async: Copying to clipboard was successful!')
    },
    function (err) {
      console.error('Async: Could not copy text: ', err)
    }
  )
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn')

copyBobBtn.addEventListener('click', function (event) {
  copyTextToClipboard('Bob')
})

copyJaneBtn.addEventListener('click', function (event) {
  copyTextToClipboard('Jane')
})

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">
Try pasting into here to see what you have on your clipboard:
  </textarea>
</div>

var text = 'Example text to appear on clipboard'
navigator.clipboard.writeText(text).then(
  function () {
    console.log('Async: Copying to clipboard was successful!')
  },
  function (err) {
    console.error('Async: Could not copy text: ', err)
  }
)

var copyTextareaBtn = document.querySelector('.js-textareacopybtn')

copyTextareaBtn.addEventListener('click', function (event) {
  var copyTextarea = document.querySelector('.js-copytextarea')
  copyTextarea.focus()
  copyTextarea.select()

  try {
    var successful = document.execCommand('copy')
    var msg = successful ? 'successful' : 'unsuccessful'
    console.log('Copying text command was ' + msg)
  } catch (err) {
    console.log('Oops, unable to copy')
  }
})

<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

function copyTextToClipboard(text) {
  var textArea = document.createElement('textarea')

  //
  // *** 这一步额外的样式设置可能不是必须的。 ***
  //
  // 为什么要这样做？为了确保：
  // 1. 该元素能够获得焦点和选择。
  // 2. 如果该元素闪烁呈现，它的视觉影响最小。
  // 3. 尽量减少选择和复制时可能出现的不稳定性 **可能**
  //    在元素不可见时发生。
  //
  // 可能这些元素不会呈现，甚至不会闪烁，所以有些只是预防措施。
  // 但是在Internet Explorer中，元素会在弹出框
  // 要求用户允许网页复制到剪贴板时显示。
  //

  // 无论滚动位置如何，放置在屏幕的左上角。
  textArea.style.position = 'fixed'
  textArea.style.top = 0
  textArea.style.left = 0

  // 确保它的宽度和高度很小。设置为1px / 1em
  // 在某些浏览器中无法工作。
  textArea.style.width = '2em'
  textArea.style.height = '2em'

  // 我们不需要填充，减少如果闪烁呈现时的大小。
  textArea.style.padding = 0

  // 清理任何边框。
  textArea.style.border = 'none'
  textArea.style.outline = 'none'
  textArea.style.boxShadow = 'none'

  // 如果由于任何原因呈现时避免白框闪烁。
  textArea.style.background = 'transparent'

  textArea.value = text

  document.body.appendChild(textArea)
  textArea.focus()
  textArea.select()

  try {
    var successful = document.execCommand('copy')
    var msg = successful ? 'successful' : 'unsuccessful'
    console.log('Copying text command was ' + msg)
  } catch (err) {
    console.log('Oops, unable to copy')
  }

  document.body.removeChild(textArea)
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn')

copyBobBtn.addEventListener('click', function (event) {
  copyTextToClipboard('Bob')
})

copyJaneBtn.addEventListener('click', function (event) {
  copyTextToClipboard('Jane')
})

<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">
Try pasting into here to see what you have on your clipboard:
  </textarea>
</div>