前端 JS实现点击文本实现复制文本

转载于 2023-02-20 11:10:45 发布 · 827 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_45093219/article/details/127088101

文章标签：

#前端

JavaScript学习专栏收录该内容

26 篇文章

订阅专栏

文章介绍了如何在HTML中创建一个点击后复制当前文本的功能。通过JavaScript的DOM操作，创建临时输入元素，设置文本值，选中内容，然后执行复制命令，最后移除临时元素，实现文本的无痕复制。

需求背景：表格当中，某一列实现点击就复制当前文本点击文本复制当前内容

HTML部分：

<a onClick={()=>this.copy('自定义复制的文本')} title="点击复制" style={{textDecoration:'underline'}}>{'自定义复制的文本'}</a>

其中CSS样式 textDecoration:'underline' 给文字添加下划线

JS部分：

copy=(text:any)=>{
  const input = document.createElement('input')
  input.value = text // 设置复制内容
  document.body.appendChild(input) // 添加临时实例
  input.select() // 选择实例内容
  document.execCommand('Copy') // 执行复制
  document.body.removeChild(input) // 删除临时实例
  console.log('复制成功！')//可以加一个友好提示给用户
}