clipboard复制粘题问题

记录下项目中使用clipboard复制粘题问题

简单的clipboard用法

引入clipboard

npm install clipboard --save

官网地址:传送门

使用方法

通过监听获取剪切板数据

通过监听document.addEventListener(‘paste’)获取到数据

自定义获取clipboard剪切板值

但是在一些业务场景中，无法用document.addEventListener(‘paste’) 去监听拿到数据，可以有些操作是用户自定义，比如快捷键（组合键）是自己设置的，比如鼠标右击事件改写了，这个时候就需要换一种方式拿到剪贴板的值了，通过navigator.clipboard.readText()获取到剪贴板的值，但是在这里遇到了一些问题，本地localhost可以获取到，打包部署后无法获取到。

本地图片

线上图片（非https）

后面查了资料由于地址访问的安全策略，需要在安全域名下才能访问到clipboard,https和本地localhost都是安全域名下。如果线上部署没有https安全证书的情况时，但是又需要自定义获取到剪切板内容，可以在复制的时候将数据存入到本地存储或者window上，这是一个不友好的实现方式，但是可以解决遇到的问题，我这边是插入到了navigator下