使用 JavaScript 复制数据
大家好。在本文中，我将告诉大家如何使用 JavaScript 复制内容。
在开始之前，我需要说明一下，本文中的信息已经构建了一个 npm 包。
您可以安装它进行测试。
https://www.npmjs.com/package/copy-simple
npm i copy-simple
此外，此链接中还有一个 GitHub 代码库。
我将创建一个名为copy 的空函数。我们将使用此函数来复制值、元素文本、HTML 或选定的文本。
function copy(el) {
// We will create different functions
}
el参数将用于通过querySelector方法处理元素。这意味着我们的方法将会改变。
function copy(el) {
var e = document.querySelector(el);
function saveClipBoard(data) {
}
function val() {
}
function text() {
}
function html() {
}
function url() {
}
function selected() {
}
return {
val: val,
text: text,
html: html,
url: url,
selected: selected
}
}
有些新方法本身不包含任何内容。但我们的方法看起来就像这样。正如你所看到的，我们的方法会返回一个包含方法的对象。
创建临时 HTML 元素以进行复制
为了复制内容，我们需要创建一个输入元素。创建输入元素的方法可能有很多种。但是复制完成后，我们需要删除这个输入元素。为此，我们将使用 ` saveClipBoard`方法。
创建 saveClipBoard 方法
我们的方法如下：
function saveClipBoard(data) {
var dummy = document.createElement('input');
var text = data;
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
var success = document.execCommand('copy');
document.body.removeChild(dummy);
return success;
}
在这个方法中，我们将数据参数的值赋给了虚拟元素的值。之后，我们使用了execCommand方法。该方法会返回一个布尔值。执行完此方法后，我们将删除虚拟元素。您也可以尝试一下。
获取值
其他方法也类似。
function val() {
var v = e.value
return saveClipBoard(v)
}
function text() {
var t = e.innerText
return saveClipBoard(t)
}
function html() {
var h = e.outerHTML
return saveClipBoard(h)
}
function url() {
var u = window.location.href
return saveClipBoard(u)
}
function selected() {
var s = window.getSelection().toString()
return saveClipBoard(s)
}
这些方法很容易理解。每个方法都会调用saveClipBoard方法。还有一个叫做getSelection 的方法，你可能不知道。Mozilla 表示：
返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
就这样，我们的方法完成了。
function copy(el) {
var e = document.querySelector(el);
function saveClipBoard(data) {
var dummy = document.createElement('input');
var text = data;
document.body.appendChild(dummy);
dummy.value = text;
dummy.select();
var success = document.execCommand('copy');
document.body.removeChild(dummy);
return success;
}
function val() {
var v = e.value
return saveClipBoard(v)
}
function text() {
var t = e.innerText
return saveClipBoard(t)
}
function html() {
var h = e.outerHTML
return saveClipBoard(h)
}
function url() {
var u = window.location.href
return saveClipBoard(u)
}
function selected() {
var s = window.getSelection().toString()
return saveClipBoard(s)
}
return {
val: val,
text: text,
html: html,
url: url,
selected: selected
}
}
我们来测试一下。
我已经在 CodePen 上为你创建了一个示例。要测试我们的方法，你需要点击按钮。
您可以使用评论块中的其他方法。
希望这篇文章对你有所帮助。
感谢阅读。
文章来源：https://dev.to/itachiuchiha/copying-data-with-javascript-13kl