关于javascript:JavaScript-中的复制粘贴操作

在日常业务开发，比方复制后减少版权信息，点击复制，等场景中须要进行复制粘贴的操作，以下是几种实现计划。

Clipboard API 提供了响应剪贴板命令（剪切、复制和粘贴）与异步读写零碎剪贴板的能力。从权限 API (Permissions API) 获取权限之后，能力拜访剪贴板内容；如果用户没有授予权限，则不容许读取剪贴板内容。

能够应用全局的 Navigator.clipboard 来拜访剪贴板。

Navigator.clipboard 属性返回 Clipboard 对象，所有操作都通过这个对象进行。

Clipboard 对象提供了四个办法，用来读写剪贴板。它们都是异步办法，返回 Promise 对象。

read() 办法能够从剪贴板读取任意数据，能够是文本数据，也能够是二进制数据（比方图片）。该办法须要用户明确给予许可。

read() 办法返回一个 Promise 对象。一旦该对象的状态变为 resolved，就能够取得一个数组，每个数组成员都是 ClipboardItem 对象的实例。

ClipboardItem 对象示意一个独自的剪贴项，每个剪贴项都领有 types 属性和 getType() 办法。

ClipboardItem.types 属性返回一个数组，外面的成员是该剪贴项可用的 MIME 类型，比方某个剪贴项能够用 HTML 格局粘贴，也能够用纯文本格式粘贴，那么它就有两个 MIME 类型（text/html 和 text/plain）。

ClipboardItem.getType(type) 办法用于读取剪贴项的数据，返回一个 Promise 对象。该办法承受剪贴项的 MIME 类型作为参数，返回该类型的数据，该参数是必须的，否则会报错。

示例：

// 获取权限
navigator.permissions
.query({name: 'clipboard-read'})
.then(result => {if (result.state == 'granted' || result.state == 'prompt') {
    // 读取剪贴板
    navigator.clipboard.read().then(data => {console.log(data)
    })
  } else {alert('请容许读取剪贴板！')
  }
})

readText() 办法能够从剪贴板读取文本内容。该办法须要用户明确给予许可。

示例：

// 获取权限
navigator.permissions
.query({name: 'clipboard-read'})
.then(result => {if (result.state == 'granted' || result.state == 'prompt') {
    // 读取剪贴板
    navigator.clipboard.readText().then(text => {console.log(text)
    })
  } else {alert('请容许读取剪贴板！')
  }
})

write() 办法能够将任意数据写入剪贴板，能够是文本数据，也能够是二进制数据。该办法不须要用户许可。

write() 办法承受一个 ClipboardItem 实例作为参数，示意写入剪贴板的数据。

示例：

// 写入一张图片
const imgURL = 'https://dummyimage.com/300.png'
const data = await fetch(imgURL)
const blob = await data.blob()
await navigator.clipboard.write([
    new ClipboardItem({[blob.type]: blob
    })
])

留神，Chrome 浏览器目前只反对写入 PNG 格局的图片。

writeText() 办法能够写入文本内容至剪贴板。该办法不须要用户许可。

示例：

navigator.clipboard.writeText('写入剪贴板文本内容')

因为用户可能把敏感数据（比方明码）放在剪贴板，容许脚本任意读取会产生平安危险，所以这个 API 的平安限度比拟多。

首先，Chrome 浏览器规定，只有 HTTPS 协定的页面能力应用这个 API。不过，开发环境（localhost）容许应用非加密协议。

其次，调用时须要明确取得用户的许可。权限的具体实现应用了 Permissions API，跟剪贴板相干的有两个权限：clipboard-write（写权限）和 clipboard-read（读权限）。“写权限”主动授予脚本，而“读权限”必须用户明确批准给予。也就是说，写入剪贴板，脚本能够主动实现，然而读取剪贴板时，浏览器会弹出一个对话框，询问用户是否批准读取。

这个 API 已弃用，不举荐应用它，然而为了兼容还是理解一下吧。

document.execCommand() 办法用于操纵可编辑区域的内容。

`document.execCommand('copy')`

document.execCommand('copy') 实现复制操作

示例：

<input id="copyContent" value="须要被复制内容">
<button id="copyBtn"> 点我复制 </button>

const copyBtn = document.querySelector('#copyBtn');
const copyContent = document.querySelector('#copyContent');
// 复制操作要放在事件监听函数外面，由用户触发（比方用户点击按钮）。copyBtn.addEventListener('click', () => {copyContent.select();
    document.execCommand('copy');
})

`document.execCommand('paste')`

document.execCommand('paste') 实现粘贴操作

示例：

<input id="paste" placeholder="粘贴">

const pasteText = document.querySelector('#paste');
pasteText.focus();
document.execCommand('paste');

Chrome、Firefox 不反对 document.execCommand('paste')

除了应用原生 JS 外，还能够应用一些第三方的库，比方 clipboard.js 来实现复制文本到剪贴板的操作。

npm 装置

npm install clipboard --save

script 标签引入

<script src="dist/clipboard.min.js"></script>

1、用一个元素当触发器来复制另一个元素的文本，须要传递 DOM 选择器，HTML 元素或 HTML 元素列表来实例化它。

2、在触发器元素上增加 data-clipboard-target 属性，该属性值是一个元素选择器，用来匹配另一个须要被复制的元素。

示例：

<div id="copyContent"> 须要被复制的内容 </div>
<button id="copyBtn" data-clipboard-target="#copyContent"> 点击复制 </button>

// 触发器
var clipboard = new ClipboardJS('#copyBtn')

clipboard.on('success', function (e) {console.log('复制胜利！')
  console.log('操作文本内容:', e.text)
  console.log('触发操作的 DOM 元素:', e.trigger)
  e.clearSelection()})

clipboard.on('error', function (e) {console.log('复制失败')
  console.log('触发操作的 DOM 元素:', e.trigger)
})

另外，触发器元素上也能够定义 data-clipboard-action 属性为 copy 或 cut，来明确操作是复制还是剪切，如果疏忽了这个属性，则默认是复制。值为 cut 时仅实用于 input 或 textarea 元素。

<input id="copyContent" value="须要被复制的内容"/>
<button id="copyBtn" data-clipboard-target="#copyContent" data-clipboard-action="cut"> 点击剪切 </button>

// 触发器
var clipboard = new ClipboardJS('#copyBtn')

clipboard.on('success', function (e) {console.log('复制胜利！')
  console.log('操作文本内容:', e.text)
  console.log('触发操作的 DOM 元素:', e.trigger)
  e.clearSelection()})

clipboard.on('error', function (e) {console.log('复制失败')
  console.error('触发操作的 DOM 元素:', e.trigger)
})

如果在触发器元素上定义 data-clipboard-text 属性，则不须要另一个元素来复制其内容。data-clipboard-text 属性值就是须要被复制的内容。

示例：

<button id="copyBtn" data-clipboard-text="须要被复制的内容"> 点击复制 </button>

// 触发器
var clipboard = new ClipboardJS('#copyBtn')

clipboard.on('success', function (e) {console.log('复制胜利！')
  console.log('操作文本内容:', e.text)
  console.log('触发操作的 DOM 元素:', e.trigger)
  e.clearSelection()})

clipboard.on('error', function (e) {console.log('复制失败')
  console.error('触发操作的 DOM 元素:', e.trigger)
})

用户向剪贴板放入数据时，将触发 copy 事件。

示例：

document.addEventListener('copy', function (event) {alert('触发复制事件')
  // 剪切板数据
  console.log(event.clipboardData)
})

下面示例中，事件对象的 clipboardData 属性蕴含了剪贴板数据。它是一个对象，有以下属性和办法。

`setData()` 办法

Event.clipboardData.setData(type, data)：在 cut 和 copy 事件中批改剪贴板数据，须要指定数据类型。

示例：

<div id="copyContent">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos expedita temporibus facere mollitia nemo at voluptatibus dicta commodi neque iusto nesciunt earum suscipit deserunt delectus numquam cum nulla libero fugit.
</div>

var copyContent = document.querySelector('#copyContent');
copyContent.addEventListener('copy', (event) => {const selection = document.getSelection();
    // 复制文本内容转大写
    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
    event.preventDefault();});

`getData()` 办法

Event.clipboardData.getData(type)：在 paste 事件中获取剪贴板数据，须要指定数据类型。

示例：

document.addEventListener('paste', function (event) {alert('触发粘贴事件')
  // 获取粘贴文本内容
  var text = event.clipboardData.getData('text/plain');
  console.log('粘贴内容：',text)
})

`items` 属性

Event.clipboardData.items：一个相似数组的对象，蕴含了所有剪贴项，不过通常只有一个剪贴项。

cut 事件则是在用户进行剪切操作时触发，它的解决跟 copy 事件齐全一样，也是从 Event.clipboardData 属性拿到剪切的数据。

示例：

document.addEventListener('cut', function () {alert('触发剪切事件')
    // 剪切板数据
    console.log(event.clipboardData)
})

用户应用剪贴板数据，进行粘贴操作时，会触发 paste 事件。

示例：

document.addEventListener('paste', async (e) => {e.preventDefault();
  // 获取剪贴板里的文本数据
  const text = await navigator.clipboard.readText();
  console.log('粘贴文本:', text);
});

点击复制
读取剪贴板图片
复制追加版权信息

Web 一键复制与粘贴

剪贴板复制粘贴操作汇总

JavaScript 复制内容到剪贴板

剪贴板操作 Clipboard API 教程

复制粘贴插件——clipboard.js 的应用

关于javascript:JavaScript-中的复制粘贴操作

Clipboard API

read() 办法

readText() 办法

write() 办法

writeText() 办法

平安限度

Document.execCommand()

`document.execCommand('copy')`

`document.execCommand('paste')`

clipboard.js

装置

应用

事件监听

copy 事件

clipboardData 对象

`setData()` 办法

`getData()` 办法

`items` 属性

cut 事件

paste 事件

相干示例

参考文章

Clipboard API

read() 办法

readText() 办法

write() 办法

writeText() 办法

平安限度

Document.execCommand()

document.execCommand('copy')

document.execCommand('paste')

clipboard.js

装置

应用

事件监听

copy 事件

clipboardData 对象

setData() 办法

getData() 办法

items 属性

cut 事件

paste 事件

相干示例

参考文章

`document.execCommand('copy')`

`document.execCommand('paste')`

`setData()` 办法

`getData()` 办法

`items` 属性