剪贴板——客户端存储

• 2019 年 11 月 26 日
• 筆記

概述

Clipboard API是通过copy、cut、paste等事件来实现的。

WEB应用程序可以通过处理这些事件，与其他WEB应用程序以及客户端本地应用程序进行数据交换。

代码示例

复制数据

document.addEventListener('copy', function(e){    e.clipboardData.setData('text/plain', 'Hello, hudao!');    e.clipboardData.setData('text/html', '<b>Hello, hudao!</b>');     e.preventDefault(); });

当用户启动复制操作时, 如果应用程序没有取消该事件的缺省动作，则所选数据将被复制到剪贴板。 另外，应用程序可以通过event.clipboardData API来控制复制到剪贴板的数据类型和内容。

剪切数据

当用户启动剪切操作时, 如果应用程序没有取消该事件的缺省动作，则所选内容将被复制到剪贴板，并从文档中删除所选内容。 但是在非编辑环境(non-editable context)中, 如果应用程序也没有做相应的处理， “剪切” 操作将不做任何事情。

document.addEventListener('cut', function(e){     e.clipboardData.setData('text/plain', 'Hello, hudao!');     e.clipboardData.setData('text/html', '<b>Hello, hudao!</b>');     e.preventDefault(); });

粘贴数据

当用户启动粘贴操作时, 如果应用程序没有取消该事件的缺省动作，则剪贴板数据将粘贴到页面。 但是在非编辑环境(non-editable context)中, 如果应用程序也没有做相应的处理， “粘贴” 操作将不做任何事情。

document.addEventListener('paste', function(e){    if(e.clipboardData.types.indexOf('text/html') > -1){ p    rocessDataFromClipboard(e.clipboardData.getData('text/html'));    e.preventDefault(); }});