剪贴板

 

概述

剪贴板(Clipboard)API是通过copy、cut、paste等事件来实现的。

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

代码示例

复制数据

当用户启动复制操作时, 如果应用程序没有取消该事件的缺省动作,则所选数据将被复制到剪贴板。

另外,应用程序可以通过event.clipboardData API来控制复制到剪贴板的数据类型和内容。

  document.addEventListener('copy', 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('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){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();
    }
});

参考

相关页面

外部链接