剪贴板——客户端存储
概述
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(); }});本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-04-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录