写入内容到剪切板
写入方式
通常，我们写入剪切板的方式有以下四种（此处忽略借助flash的方式）：
- 通过
clipboard自带的writeText方法写入 - 通过
clipboard自带的write方法写入 - 通过
execCommand执行copy命令，在onCopy事件中通过event.clipboardData.setData写入 - 创建一个
input或者textarea，将输入框内容设置为需要复制的内容，然后插入输入框到页面，执行选中，通过execCommand执行copy命令，最后移除输入框
写入方式优缺点对比
| 写入方式 | 兼容性 | 优缺点 |
|---|---|---|
| 方式一 | 支持所有主流浏览器 | 只能写入MIMETYPE为"text/plain"的纯文本 |
| 方式二 | 不支持firefox | 支持写入多种类型，但是ClipboardItem这个API存在兼容性问题，传入对象的value值为字符串的情况仅支持Safari浏览器，且Safari写入时无需用户授权 |
| 方式三 | 支持所有主流浏览器 | 能够写入多种MIMETYPE的数据，但是execCommand('copy')在Safari浏览器中非input和textarea元素无法触发copy事件 |
| 方式四 | 支持所有主流浏览器 | 创建元素必须为input或者textarea，需要操作dom |
从剪切板读取内容
读取方式
与写入内容类似，我们从剪切板中读取内容有以下三种方式：
- 通过
clipboard自带的readText方法读取 - 通过
clipboard自带的read方法读取 - 通过
onPaste事件的event.clipboardData.items获取到当前剪切板的数据，然后遍历items，通过getAsString方法读取内容
读取方式优缺点对比
| 读取方式 | 兼容性 | 优缺点 |
|---|---|---|
| 方式一 | 几乎主流浏览器都支持 | 只能读取MIMETYPE为'text/plain'类型的数据，需要用户授权读取剪切板 |
| 方式二 | 兼容性较差 | 需要用户授权读取剪切板，兼容性较差，能够获取各种支持的MIMETYPE类型数据，但大多浏览器只能拿到Blob数据，需要自己进行转换 |
| 方式三 | 几乎主流浏览器都支持 | 无法直接触发，只能通过用户触发粘贴事件来获取数据，能够获取各种支持的MIMETYPE类型数据 |
剪切板操作总结
- 只写入纯文本数据，使用
navigator.clipboard.writeText写入即可 - 需要写入多种类型的数据时，Safari浏览器使用
navigator.clipboard.write进行写入，其他浏览器通过document.execCommand('copy'),然后再copy事件中通过event.clipboardData.setData()写入 - 不要主动读取用户的剪切板数据，需要通过用户主动触发粘贴事件，从
paste事件的event.clipboardData中获取数据