js打开页面自动复制文本到剪贴板_使用JavaScript将文本复制到剪贴板

这是一个快速教程，解释了如何使用JavaScript单击按钮将文本复制到剪贴板。

在下面的演示中，单击“复制”按钮将输入 字段中写入的文本复制 到剪贴板。您也可以在文本字段中编写自己的文本，然后单击按钮进行复制。

这主要用于用户必须复制长文本，如长段，链接或某些代码的情况，否则手动复制会更加困难。

结构

创建一个 输入 字段，其中包含要复制的文本作为其属性 值的值，并创建一个按钮，用户将单击该按钮以复制文本。

HTML

Copy

造型

设置文本字段和按钮的样式。

CSS

/* styling text input field */#inputText { padding: 6px 7px; font-size: 15px;}/* styling button */#copyText { padding: 6px 11px; font-size: 15px; font-weight: bold; background-color: #121212; color: #efefef;}

Scrypting

将文本字段和按钮 分别返回到变量 text 和 btn。

单击按钮，调用执行以下两个任务的函数。

1. 通过编写text.select()来选择文本字段的内容 。该 select()方法用于选择包含文本字段(如input 或 textarea)的元素的内容 。
2. 通过编写document.execCommand(“copy”)复制文本字段的内容 。该 execCommand() 方法用于执行可编辑区域的选定部分的命令。在我们的例子中，它正在执行 复制 命令。

JS

/* 将输入字段的内容返回到变量文本 */var text = document.getElementById("inputText");/* 返回按钮到变量btn */var btn = document.getElementById("copyText");/* 按钮上的调用功能单击 */btn.onclick = function() { text.select();  document.execCommand("copy");}

---

整理起来

HTML

Copy

CSS

/ *样式文本输入字段* / #inputText { padding: 6px 7px; font-size: 15px;}/ *样式按钮* /#copyText { padding: 6px 11px; font-size: 15px; font-weight: bold; background-color: #121212; color: #efefef;}

JS

/ *将输入字段的内容返回到变量文本* / var text = document.getElementById("inputText");/ *返回按钮到变量btn * / var btn = document.getElementById("copyText");/ *按钮上的调用功能单击* / btn.onclick = function() { text.select();  document.execCommand("copy");}

欢迎大家在评论区留言进行讨论。整理不易，请大家多多关注、收藏，感谢大家的支持。