js实现将要复制的内容放到剪贴板里面

客官°小女子只卖身不卖艺 2022-06-07 00:44 232阅读 0赞

**功能：点击按钮，将当前页面的url放到剪贴板里面**

**1、对于IE有一个专门的接口来设置要复制的内容：window.clipboardData**

**      复制当前页面的url**

**             html如下：               **

<button onClick = 'copyURL();'>复制url地址</button>

js如下：

function copyURL(){
                 var url = location.href;
                 window.clipboardData.setData('Text',url);
                 console.log('success');
           }

**注意window.clipboardData只是对IE有效，对其他浏览器都不兼容**

**2、利用js插件ZeroClipboard实现跨浏览器复制功能**

**      A、在HTML中引入该插件       **

<textarea id="content" rows="10" cols="60">这里是需要复制的内容</textarea>
           <input id="copy" type="button" data-clipboard-target="content" value="复制">

B、部分js代码

var clip = new ZeroClipboard( document.getElementById("copy") );

**解析：在textarea里面设置id = 'content'，在要触发复制事件的对象input里面设置属性data-clipboard-target的值为要复制的对象的id，               即content。**

**           js中直接生成对象ZeroClipboard，如ZeroClipboard(document.getElementById('copy'));  //点击'copy'按钮，就可以将textarea**

**           中的内容复制到剪贴板里面**

**另外一个例子：利用ZeroClipboard插件实现将当前页面的URL复制到剪贴板里面**

**       首先、在HTML中引入插件ZeroClipboard       **

**       其次、在html中定义触发复制事件的对象               **

**       然后、在js文件中调用ZeroClipboard，js部分代码如下（这里用的是jquery语法，所以在html中先引入jquery）**

// 点击按钮，实现将当前页url放到剪贴板上，并关闭当前页
        $('#clipBoardTxt').click(function(){
            var clipBoardCont = location.href;                 // 要复制的url

var clip = new ZeroClipboard($('#clipBoardTxt')); // 定义触发复制的对象

clip.setText(clipBoardCont); // 设置剪贴板的内容 ,至此已经将剪贴板的内容设置为当前页的url了 success_prompt_alert('复制成功'); // 自定义提示的函数