js实现的复制和粘贴

背景

前段时间在玩原神的时候，发现同事也在玩，于是和同事讲加下好友，以后可以一起玩。但是当同事复制uid的时候，却发现原神游戏中复制的uid，无法粘贴到wx中。于是乎，身为开发的我们就讨论起来，这是不是bug啊，是什么原因啊。今天就来和大家分享下，如果是web前端，我们这个复制和粘贴是怎么弄的。

模拟粘贴板

首先，如果想要达到一个类似原神的那种效果，在我的页面复制的东西，只能在我的页面粘贴。（ps：一样东西也别想带走）那么，我们可以自己模拟一个系统粘贴板。举个例子

    const preview = document.createElement('div');
    preview.style.cssText = `
    background-color:#fff;
    border:1px solid #eee; 
    position:absolute;
    inset:0;
    font-size:18px;
    color:#f00;
    z-index: 9999999`;
    document.body.appendChild(preview);

    const clipboard = new Map();

    function onKeydown(ev) {
      ev.preventDefault()
      if (ev.metaKey || ev.ctrlKey) {
      
        // c键位
        if (ev.keyCode === 67) {
          // 将'不知名前端'存储粘贴板中，定义text为key，可以实现不同文件类型的复制粘贴，而粘贴板内的内容互不干扰
          clipboard.set('text', '不知名前端')
          console.log(ev.keyCode, 'c');
        }

        // v键位
        if (ev.keyCode === 86) {
          const clipText = clipboard.get('text')
          preview.innerText = clipText;
          console.log(ev.keyCode, 'v');
        }

        if (ev.keyCode === 88) {
          preview.innerText = ''
        }
      }
    }

    document.addEventListener('keydown', onKeydown);

上面的代码，复制到浏览器控制台，并使用ctrl + c 和 ctrl + v试下看？
然后你切换到，再去c,v一下，会发现，你粘贴的内容并没有带到这个页面之外对不对？

或者你切换到wx、dd等聊天软件复制一段文字，返回我们的页面，ctrl + c的时候也没有粘贴进来什么东西是不是？

系统粘贴板

这种自定义的实现很简单对吧，当然它不是我们今天研究的重点，今天我们来研究一下系统粘贴板的使用，还是废话少说，举例子

 const preview = document.createElement('div');
    preview.style.cssText = `
    background-color:#fff;
    border:1px solid #eee; 
    position:absolute;
    inset:0;
    font-size:18px;
    color:#f00;
    z-index: 9999999`;
    document.body.appendChild(preview);

    function onKeydown(ev) {
      if (ev.metaKey || ev.ctrlKey) {
        // c键位
        if (ev.keyCode === 67) {
          // 将粘贴内容写入粘贴板
          navigator.clipboard.writeText('不知名前端')
        }

        // v键位
        if (ev.keyCode === 86) {
          // 访问粘贴板
          navigator.permissions
            .query({ name: 'clipboard-read' })
            .then(result => {
              if (result.state == 'granted' || result.state == 'prompt') {
                navigator.clipboard.readText().then(async function (str) {
                  try {
                    const itemFromClipboard = str
                    if (!itemFromClipboard) return
                    preview.innerText = itemFromClipboard;
                    console.log(itemFromClipboard)

                  } catch (err) {
                    console.log('paste err', err)
                  }
                })
              }
            })
        }

        if (ev.keyCode === 88) {
          preview.innerText = ''
        }
      }
    }

    document.addEventListener('keydown', onKeydown);

大家再把这段代码复制到浏览器控制台，再使用ctrl + c 和 ctrl + v试下看， 和刚才的效果一样吗？ 看着一样，但是实际并不一样，现在你把页面切换到浏览器之外的软件，ctrl + c的时候，是不是可以把’不知名前端’粘贴出去了， 然后在你的聊天软件内，再次使用c，v大法。返回我们的页面，使用ctrl + v…

如果不出意外，大家应该能看到效果了，这就是今天想要水的内容了。感谢各位赏脸来捧场