Web API - Clipboard

Clipboard API ，它允许我们与用户的剪贴板进行交互，实现复制和粘贴的功能。

Clipboard API 提供了以下方法，用于实现复制和粘贴：

navigator.clipboard.writeText(text)：这个方法用于将给定的文本复制到剪贴板。如果操作成功完成，它会返回一个已解析的 Promise。我们可以使用 await 来等待复制操作完成，或者使用 then 和 catch 来处理异步操作的结果。
navigator.clipboard.write(data) ：这个方法用于写入更复杂的数据类型，如文件、图像等。如果操作成功完成，它会返回一个已解析的 Promise。
navigator.clipboard.readText()：这个方法用于从剪贴板读取文本内容。它会返回一个 Promise，Promise 解析后会提供剪贴板中的文本内容。
navigator.clipboard.read()：这个方法用于读取更复杂的数据类型，如文件、图像等。它会返回一个 Promise，Promise 解析后会提供剪贴板中的数据。

粘贴复制文本

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Clipboard API 示例</title><style>#output {border: 1px solid #ccc;padding: 10px;margin-top: 10px;}</style></head><body><h1>Clipboard API 示例</h1><input type="text" id="inputField" placeholder="输入要复制的文本"><button id="copyButton">复制文本到剪贴板</button><button id="pasteButton">从剪贴板粘贴文本</button><div id="output">粘贴的文本将显示在这里。</div><script>const copyButton = document.getElementById('copyButton');const pasteButton = document.getElementById('pasteButton');const inputField = document.getElementById('inputField');const output = document.getElementById('output');// 复制文本到剪贴板copyButton.addEventListener('click', async () => {const text = inputField.value;if (text.trim() === '') {alert('请输入要复制的文本。');return;}try {await navigator.clipboard.writeText(text);alert('文本已复制到剪贴板！');} catch (error) {console.error('复制失败：', error);alert('复制失败，请手动复制。');}});// 从剪贴板粘贴文本pasteButton.addEventListener('click', async () => {try {const text = await navigator.clipboard.readText();output.textContent = `粘贴的文本：${text}`;} catch (error) {console.error('粘贴失败：', error);alert('粘贴失败，请手动输入。');}});</script></body>
</html>

粘贴复制图片

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Clipboard Image Example</title><style>img {width: 50%;}</style>
</head><body><h1>Clipboard Image Example</h1><img id="sourceImage" src="./bing0509.png" alt="Sample Image"><br /><button id="copyImageButton">复制图片</button><button id="pasteImageButton">粘贴图片</button><div id="imageDisplay"></div><script>const copyImageButton = document.getElementById('copyImageButton');const pasteImageButton = document.getElementById('pasteImageButton');const sourceImage = document.getElementById('sourceImage');const imageDisplay = document.getElementById('imageDisplay');// 复制图片到剪贴板copyImageButton.addEventListener('click', async () => {try {const response = await fetch(sourceImage.src);const blob = await response.blob();const item = new ClipboardItem({ 'image/png': blob });await navigator.clipboard.write([item]);alert('图片已复制到剪贴板！');} catch (err) {console.error('无法复制图片到剪贴板：', err);}});// 从剪贴板粘贴图片pasteImageButton.addEventListener('click', async () => {try {const clipboardItems = await navigator.clipboard.read();for (const clipboardItem of clipboardItems) {const types = clipboardItem.types;if (types.includes('image/png')) {const blob = await clipboardItem.getType('image/png');const imageUrl = URL.createObjectURL(blob);const img = document.createElement('img');img.src = imageUrl;imageDisplay.appendChild(img);alert('图片已从剪贴板粘贴！');break;}}} catch (err) {console.error('无法从剪贴板粘贴图片：', err);}});</script>
</body></html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/62660.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！