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

目录

【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)
  }
},

来源

相关推荐
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome
m51272 小时前
LinuxC语言
java·服务器·前端