前端实现“点击按钮触发复制文本”功能

目录

【1】实现复制文本功能【部分浏览器不支持】

以下代码实现文本赋值功能我本地浏览器成功了,但是现场环境浏览器 "复制失败",

  • 我本地浏览器版本:128.0.6613.115
  • 现场环境浏览器版本:86.0.4240.111
js 复制代码
async mikeOpen() {
  // window.open('chrome://flags/#unsafely-treat-insecure-origin-as-secure')
  // location.href = 'chrome://flags/#unsafely-treat-insecure-origin-as-secure'

  try {
    await navigator.clipboard.writeText(
      'chrome://flags/#unsafely-treat-insecure-origin-as-secure'
    )
    this.$message('谷歌浏览器访问已复制地址添加平台网址信息开启麦克风权限111')
  } catch (err) {
    console.log('err----111', err)
    this.$message('复制失败111')
  }
},

现场环境浏览器 "复制失败" 报错

【2】兼容

【1】的问题可能是现场浏览器不支持 navigator.clipboard.writeText(),可以使用 document.execCommand('copy') ,但是好像有的浏览器不支持document.execCommand('copy')
所以添加了判断,如果浏览器支持 document.execCommand('copy') 则使用 document.execCommand('copy') 进行复制;

如果浏览器支持 navigator.clipboard.writeText 则使用 navigator.clipboard.writeText 修改复制方式

js 复制代码
async mikeOpen() {
  // window.open('chrome://flags/#unsafely-treat-insecure-origin-as-secure')
  // location.href = 'chrome://flags/#unsafely-treat-insecure-origin-as-secure'

  this.copyToClipboard('chrome://flags/#unsafely-treat-insecure-origin-as-secure')
    .then(() => {
      this.$message('谷歌浏览器访问已复制地址添加平台网址信息开启麦克风权限222')
    })
    .catch((err) => {
      console.log('err----2222', err)
      this.$message('复制失败222')
    })
},

copyToClipboard(textToCopy) {
  if (document.execCommand('copy')) {
    // 创建textarea
    var textArea = document.createElement('textarea')
    textArea.value = textToCopy
    // 使textarea不在viewport,同时设置不可见
    textArea.style.position = 'fixed'
    textArea.style.opacity = 0
    textArea.style.left = '-999999px'
    textArea.style.top = '-999999px'
    document.body.appendChild(textArea)
    textArea.focus()
    textArea.select()
    return new Promise((res, rej) => {
      // 执行复制命令并移除文本框
      document.execCommand('copy') ? res() : rej()
      textArea.remove()
    })
  } else if (navigator.clipboard && typeof navigator.clipboard.writeText === 'function') {
    // navigator clipboard 向剪贴板写文本
    return navigator.clipboard.writeText(textToCopy)
  }
},

来源

相关推荐
今禾几秒前
Zustand状态管理(下):从基础到高级应用
前端·react.js·前端框架
gnip7 分钟前
js模拟重载
前端·javascript
Naturean10 分钟前
Web前端开发基础知识之查漏补缺
前端
curdcv_po11 分钟前
🔥 3D开发,自定义几何体 和 添加纹理
前端
单身汪v16 分钟前
告别混乱:前端时间与时区实用指南
前端·javascript
鹏程十八少42 分钟前
2. Android 深度剖析LeakCanary:从原理到实践的全方位指南
前端
我是ed42 分钟前
# cocos2 场景跳转传参
前端
shenshizhong42 分钟前
鸿蒙南向开发 编写一个简单子系统
前端·harmonyos
MrSkye43 分钟前
🔥深入浅出function.call() - 手写实现竟然只需要这5步!🔥
前端·javascript·面试
ZsTs1191 小时前
被面试官问 CSS 核心?10 个基础模块笔记(Flex/Sticky/BFC 全拆解 + 陷阱提示)
前端·面试