目录

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

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

复制文本

JavaScript 提供了复制文本的 API,可以复制 inputtextarea 的这一类输入框中的文本。

下面简单实现点击 复制文本 按钮后把 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 只能复制 inputtextarea 中的内容,如果你想把其它元素或变量中的内容加入剪贴板也需要借助输入框。

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

这里推荐一个复制文本的 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-dev

这里还是使用 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 属性需要填写被复制元素的 idclass

JavaScript:

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

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

创建 clipboard.js 对象需要传入复制按钮的 idclass,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 剪贴板粘贴上传图片

相关文章:

版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/879/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。
最后编辑:2020年07月06日 ©著作权归作者所有

发表评论

正在加载 Emoji