js复制内容到剪贴板代码（全部内容复制到剪贴板中）

本文目录一览：

• 1、JavaScript如何点击实现复制文字到剪切板
• 2、如何自动选定一个网页显示的全部内容到复制到剪贴板中？
• 3、如何用JS操作粘贴板

JavaScript如何点击实现复制文字到剪切板

可以使用clipboard插件解决这个问题。

github里直接搜索clipboard就可以找到了。

该插件并不依赖jquery。直接引入即可使用。

使用方法：

input id=”foo” value=”被复制的内容”

button class=”btn” data-clipboard-target=”#foo”点击复制/button

new Clipboard(‘.btn’);

这里的.btn是元素的class属性，可以使用任意id或者class以及元素节点名称来实例化插件。

默认会为元素绑定click事件，点击的时候会触发。

data-clipboard-target参数指定被复制内容的元素。

如上例，点击按钮后会将input的值“被复制的内容”几个字复制到剪切板中。

更多使用方法可以自行github查询。

如何自动选定一个网页显示的全部内容到复制到剪贴板中？

可以使用开发者工具中的控制台来运行以下的js代码：

if(confirm(“你确定要复制整个页面的文字么？”))navigator.clipboard.writeText(document.body.innerText);

将代码复制到控制台然后回车，页面就会弹出一个确认框，点击确认之后就会将页面上的文字复制到剪贴板了。

如何用JS操作粘贴板

主要是用到了 window.clipboardData.setData(“Text”,copyText);

他主要有两个参数：第一个是设置要复制的是一段文本，第二个参数是要复制具体的内容，这个内容可以从文本框中或使用innerHTML获取。

简单的实例代码：

复制代码 代码如下:

script type=”text/javascript”

function copyData() {

var copyText = document.getElementById(“ctl00_cpRight_txtUrl”).value;

window.clipboardData.setData(“Text”,copyText);

}

/script

asp:TextBox ID=”txtUrl” runat=”server” Height=”30px” Width=”349px”/asp:TextBox

input id=”btnCopyUrl” type=”button” value=”复制URL到粘贴板” onclick=”copyData()” /

注：ctl00_cpRight_txtUrl这个ID其实是txtUrl生成页面后自动生成的ID。