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

目录

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

来源

相关推荐
我要洋人死28 分钟前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人40 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人40 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9151 小时前
【JavaScript】模块化开发
前端·javascript·vue.js
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風6 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#