在很多提供在线翻译服务的网站和 APP 的译文区域基本都有一个复制的按钮，点击就可以一键复制翻译结果，不需要手动选择复制。除了翻译网站外，很多需要提取内容的网站也都提供一键复制功能。

这里就来简单写一下 JavaScript 在浏览器环境下的复制文本和读取剪贴板。

复制文本

JavaScript 提供了复制文本的 API，可以复制 input 或 textarea 的这一类输入框中的文本。

下面简单实现点击 复制文本 按钮后把 input 中的文本复制到剪贴板。

HTML：

<input type="text" id="text-input">
<button>复制文本</button>

JavaScript：

const copyBtn = document.querySelector('button'); //  复制文本的按钮
const textInput = document.querySelector('#text-input'); //  文本输入框

//  复制文本按钮点击
copyBtn.addEventListener('click', (ev) => {
  textInput.select();  //  选中文本输入框
  document.execCommand('Copy');  //  复制文本
});

点击 复制文本 按钮后 input 中的文本会被选中，然后文本内容会复制到剪贴板。

目前这个复制文本的 API 只能复制 input 和 textarea 中的内容，如果你想把其它元素或变量中的内容加入剪贴板也需要借助输入框。

如果需要复制其它元素的内容可以设置一个隐藏的输入框，把输入框的大小设置为 0 或 1px ，点击复制按钮后可以显示输入框复制，复制完成后隐藏输入框。不过移动设备可能会导致输入法键盘弹出，而且屏幕阅读器可能会朗读编辑相关内容，体验不是太好。

这里推荐一个复制文本的 JS 库 clipboard.js ，它的大小为 10 多 K，如果对网页的体积要求不是太高的话，用这个库体验会好很多。

下面简单写一下 clipboard.js 的使用。

clipboard.js Github 地址 https://github.com/zenorocha/clipboard.js/。

clipboard.js 可以使用 npm 安装，如果不用构建工具的话也可以直接通过 script 标签引入 dist 中的 JS。

这里就使用 npm 安装 clipboard.js：

npm install clipboard --save

这里还是使用 button 复制按钮来复制 input 输入框中的文本。

HTML：

<input type="text" id="text-input">
<button id="copy-btn" data-clipboard-target="#text-input">复制文本</button>

注意复制按钮的 data-clipboard-target 属性，这个 data-clipboard-target 属性需要填写被复制元素的 id 或 class。

JavaScript：

import ClipboardJS from 'clipboard';  //  引入 clipboard.js
new ClipboardJS('#copy-btn');  //  创建 clipboard.js

如果直接通过 script 引入 clipboard.js，不用构建工具的话可以不需要写 import。

创建 clipboard.js 对象需要传入复制按钮的 id 或 class，clipboard.js 会给复制按钮绑定点击事件。

点击复制按钮就可以复制 input 中的内容。

如果要复制其它元素中的文本也是可以的，下面复制 div 中的内容，div 中会包含多段文本。

HTML：

<div id="content">
  <p>第一段内容</p>
  <p>第二段内容</p>
  <p>第三段内容<b>加粗</b></p>
</div>
<button id="copy-btn" data-clipboard-target="#content">复制文本</button>

JavaScript：

import ClipboardJS from 'clipboard';  //  引入 clipboard.js
new ClipboardJS('#copy-btn');  //  创建 clipboard.js

点击复制按钮后 div 中的内容就会被复制到剪贴板，这个复制是包含 HTML 内容的，在支持粘贴 HTML 的编辑器中粘贴就可以看到 HTML 效果，在记事本或 textarea 输入框粘贴就只能看到普通文本。

clipboard.js 在成功或出错时可以触发相应的事件：

import ClipboardJS from 'clipboard'; //  引入 clipboard.js
const clipboardJS = new ClipboardJS('#copy-btn'); //  创建 clipboard.js

//  成功事件
clipboardJS.on('success', (ev) => {
  alert('已成功复制：' + ev.text);
});

//  错误事件
clipboardJS.on('error', (ev) => {
  alert('出错了！');
});

移动设备使用 clipboard.js 复制输入框以外的元素也不会弹出输入法键盘。

读取剪贴板

因为安全和隐私问题，在浏览器中是无法直接读取剪贴板中的数据的，只有发起粘贴操作时才能读取剪贴板中的数据。

下面读取剪贴板中的数据：

//  发起粘贴操作时触发
document.addEventListener('paste', (ev) => {
  ev.clipboardData.items[0].getAsString(text => {
    console.log(text);  //  在控制台输出剪贴板中的文本
  });
});

这个粘贴事件只要在页面中按 ctrl + c 就会触发，即便网页中没有输入框也会触发。

除了能读取文本外也能读取图片，关于读取图片和更详细的读取剪贴板说明可以看 JavaScript 剪贴板粘贴上传图片 。

相关文章：