js 复制文本到剪切板 document.execCommand(“copy“)

時陨星

已于 2022-03-11 23:42:39 修改

阅读量6.3k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript html 文章标签： js javascript html 前端

于 2019-09-15 02:06:45 首次发布

本文链接：https://blog.youkuaiyun.com/ChisameMuko/article/details/100840201

javascript 同时被 2 个专栏收录

17 篇文章

订阅专栏

html

10 篇文章

订阅专栏

本文介绍了一个用于复制文本到剪切板的JavaScript函数。该函数通过创建一个隐藏的textarea元素，将要复制的文本放入其中，然后调用document.execCommand('copy')来实现复制功能。文章还提供了一个示例，展示了如何通过按钮触发复制特定元素内的文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本函数的原理是调用document.execCommand的copy命令
document.execCommand("copy")对不同浏览器的兼容性不同，详情请在这里参考

函数：

/**
 *  复制文本到剪切板
 *  @param  {String|Number} value 需要复制的文本
 *  @return {Boolean}
 */
function copyText(value) {
  if (value == null || value === '') return false
  var textarea = document.createElement('textarea')
  textarea.value = value
  document.body.appendChild(textarea)
  textarea.focus()
  textarea.setSelectionRange ? textarea.setSelectionRange(0, textarea.value.length) : textarea.select()
  var result = document.execCommand('copy')
  document.body.removeChild(textarea)
  return result
}

用法示例：

// 直接复制文本
copyText('demo')

// 通过按钮实现复制指定元素的文本
document.getElementById('button').addEventListener('click', function() {
  var text = document.getElementById("text").value
  var success = copyText(text)
  console.log(success ? '复制成功' : '复制失败')
})