vue 复制粘贴_复制可以但粘贴不了

小小码 • 2023-07-29 17:30 • 未分类 • 阅读 125

大家好，我是考100分的小小码，祝大家学习进步，加薪顺利呀。今天说一说vue 复制粘贴_复制可以但粘贴不了,希望您对编程的造诣更进一步.

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」。

前言

今天来谈谈一个小小的需求：

产品：说给我这个添加一个复制功能，点一下把内容给我复制到粘贴板上。

我：好嘞

我：说上就上，5分钟搞定，部署上去看一下，美滋滋，又是一天

5分钟过去了…

测试：测试通过，可以了

产品：复制提示成功了，但是没有在粘贴板上呢！！！

我和测试：蒙蔽了，咋会呢

产品：我的是苹果电脑

我和测试：靠，产品这么豪吗？都没想BUG，一心想着，自己那破电脑…

我：没办法了，只能看一下什么问题了…

我：又是5分钟过去了，发现：input自带的select()方法在苹果端无法进行选择，问题找出了，那就干吧。

…

先看看我5分钟CV出来的代码

window下各个浏览器正常使用，没啥问题

但是，最怕但是了，ios下就不正常了

 // 点击复制到剪贴板函数
copyToClipboard(content) {
      if (window.clipboardData) {
        window.clipboardData.setData('text', content)
      } else {
        (function(content) {
          document.oncopy = function(e) {
            e.clipboardData.setData('text', content)
            e.preventDefault()
            document.oncopy = null
          }
        })(content)
        document.execCommand('Copy')
}

注：ios下不能执行document.execCommand(‘copy’)
在ios设备下alert(document.execCommand('copy'))一直返回false
查阅相关资料发现ios下input不支持input.select();
其他兼容问题：
input 输入框不能hidden或者display: none; 如果需要隐藏输入框可以使用定位脱离文档流，然后移除屏幕

解决input自带的select()方法在苹果端无法进行选择

直接上完整代码，看着就比较简单了

copyText(text) {
      const textString = text.toString() // 数字没有 .length 不能执行selectText 需要转化成字符串
      let input = document.querySelector('#copy-input')
      if (!input) {
        input = document.createElement('input')
        input.id = 'copy-input'
        input.readOnly = 'readOnly' // 防止ios聚焦触发键盘事件
        input.style.position = 'absolute'
        input.style.left = '-2000px'
        input.style.zIndex = '-2000'
        document.body.appendChild(input)
      }

      input.value = textString
      // ios必须先选中文字且不支持 input.select();
      this.selectText(input, 0, textString.length)
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        this.$message.success('复制成功！')
      } else {
        this.$message.success('复制失败！')
      }
      input.blur()
}

input自带的select()方法

input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法

// 选择文本。createTextRange(setSelectionRange)是input方法
selectText(textbox, startIndex, stopIndex) {
      if (textbox.createTextRange) {
        // ie
        const range = textbox.createTextRange()
        range.collapse(true)
        range.moveStart('character', startIndex) // 起始光标
        range.moveEnd('character', stopIndex - startIndex) // 结束光标
        range.select() // 不兼容苹果
      } else {
        // firefox/chrome
        textbox.setSelectionRange(startIndex, stopIndex)
        textbox.focus()
      }
}