剪貼板——客戶端存儲

• 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(); }});