背景

前段时间在玩原神的时候，发现同事也在玩，于是和同事讲加下好友，以后可以一起玩。但是当同事复制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 = strif (!itemFromClipboard) returnpreview.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…

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

js实现的复制和粘贴相关推荐

JS监听复制、粘贴、剪贴
本文介绍 js监听复制粘贴剪贴的使用方法 <!DOCTYPE html> <html lang="en"><head><meta ...
ios下js复制到粘贴板_h5实现一键复制到粘贴板兼容ios
实现原理采用document.execCommand('copy') 来实现复制到粘贴板功能复制必须是选中input框的文字内容,然后执行document.execCommand('copy') ...
HTML，JS禁止鼠标右键、禁止全选、复制、粘贴的方法
禁止鼠标右键.禁止全选.复制.粘贴: oncontextmenu事件禁用右键菜单: js代码: document.oncontextmenu = function(){ event.returnVal ...
php保存复制粘贴的网页内容,JS实现网站内容的禁止复制和粘贴、另存为
JS实现网站内容的禁止复制和粘贴.另存为 google搜索"document.οncοntextmenu=true;document.onselectstart=true"会有更多 ...
html手机端一键复制,一键粘贴复制功能-兼容IE9+及其移动端-clipboard.js
使用系统提供的剪贴板是一项基本的IT技能.作为一个开发者,相信你已经知道使用 Ctrl/Cmd+A, Ctrl/Cmd+C 以及 Ctrl/Cmd+V 组合键就能快捷地进行选中.复制.粘贴.但对于普通 ...
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能简介下载引入插件使用一个节点的复制多个节点的复制剪切文本框复制输入框简介 clipboard.js 提供了一种更好. ...
js复制、粘贴完整实例代码
前端哥最近在做在线工具箱,用到了js复制.粘贴的功能,刚好现在有时间就记录下来,避免将来需要用到时候随机可查阅,同时也希望帮助到各位正在学习的前端小伙伴们前端哥用到的是浏览器自带clipboard ...
NoPrint.js：使用JavaScript在HTML中禁用打印、截屏、复制和粘贴
NoPrint.js是一个小巧整洁的开源JS库,可禁用HTML中的打印.截图.复制和粘贴功能.它还提供启用AutoBlur选项,让鼠标离开网页后内容变得模糊.这个功能可以阻止大多数普通用户截取屏幕截图 ...
js html table转excel文件 js获取(复制 / 粘贴板)的内容js复制table粘贴到excel中
js html table转excel文件参考资料: 70行代码实现vue+sheetJs导出excel功能 sheetJs的git项目代码代码太长建议直接粘贴复制 <!DOCTYPE ht ...

js实现的复制和粘贴

背景

模拟粘贴板

系统粘贴板

js实现的复制和粘贴相关推荐

最新文章

热门文章