目录

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

目录

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

来源

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
鹿屿二向箔4 分钟前
如何开发 HTML 游戏
前端·游戏·html
介si啥呀~8 分钟前
Vuex 的使用场景和使用方法
前端·javascript·vue.js·vuex
远方小镇11 分钟前
抖音开放平台-业务架构招前端
前端·javascript·面试
申朝先生24 分钟前
es6的箭头函数与普通函数的区别,箭头函数的this通常指向哪里,箭头函数可以用作构造函数吗?
前端·ecmascript·es6
TheK31 分钟前
MCP到底是什么
前端·人工智能
前端飞天猪33 分钟前
学习笔记:从手动到自动,让版本号管理成为团队的高效习惯
前端·github
关二哥拉二胡35 分钟前
前端的 AI 应用开发系列四:智能体Agent的发展历程
前端·javascript
best66636 分钟前
JS数组遍历方法这么多,for/forEach/forof我该怎么选?
前端·javascript
孟健1 小时前
【社招】字节跳动猫箱前端团队招人啦~
前端·招聘
迷途小码农零零发1 小时前
createContext+useContext+useReducer组合管理React复杂状态
前端·javascript·react.js