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

Posted 2023-03-09

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

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

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

使用方法：

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

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

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

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

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

参考技术A

1、新学习javascript，就碰到这么一个需求，几乎网上的方法都试过了。写出了总结下使用的方法：clipboard插件下载地址：https://github.com/zenorocha/clipboard.js/tree/master。

2、引入插件：目录\\clipboard.js-master\\dist\\clipboard.min.js。目录中有各种demo，分别实现了固定的文字复制，input的复制等等，可以看下找找思路；下边来记录下使用的方式：一：引入插件：<script src="js/clipboard.min.js" type="text/javascript"></script>。二：给标签添加属性：data-clipboard-text， <div id="btn" data-clipboard-text="1">        <span>Copy</span>    </div>       三：定义script ：实现复制功能---（写的内部的script，外部的总是报错，找不到类，新手不大懂，以后再补充）<script> var clipboard = new Clipboard('btn');clipboard.on('success；nction(e) e.clearSelection();//复制成功);clipboard.on('error', function(e) 。

3、该插件并不依赖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查询。

jquery实现点击复制到剪切板

1.必须有先引入 jquery库

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>

 2.js实现点击复制的代码

<script type="text/javascript">
    $(function(){
    $(‘#copy_input‘).zclip({  		　 //copy_input表示 按钮
	path: ‘ZeroClipboard.swf‘,
	copy: function(){ 　　　　　　　　　　//复制内容
	    return $(‘#mytext‘).val();	　 //mytext表示 内容
	},
	afterCopy: function(){ //复制成功
	    // $("<span id=‘msg‘/>").insertAfter($(‘#copy_input‘)).text(‘复制成功‘);
	    alert(‘复制成功‘);
	}
    });
});
</script>

 3.配置说明
 　　path:swf的路径(复制主要是用flash解决不同浏览器的复制)
 　　copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容
 　　beforeCopy:复制之前要做的function;
 　　afterCopy:复制之后要做的function;

4.提供了3个方法
 　　show:$(selected).zclip(‘show‘);　　     //复制功能有效
 　　hide:$(selected).zclip(‘hide‘); 　　　　 //复制功能无效
 　　remove:$(selected).zclip(‘remove‘);    //完全移除复制功能

5.运行成功后，点击复制按钮，会弹出一个提示框，表示复制到剪切板生效了。  弹出框出现“Copied text to clipboard”英文字符，有点不符国人使用习惯，把它改为“成功复制到剪切板”，在jquery.zclip.min.js文件中找到“Copied text to clipboard”替换成“成功复制到剪切板”就可以了。

 　　注意：当有 afterCopy()函数处理成功后的动作之后，就不会有第五步的弹框了

6.文件要放到服务器中才能运行，直接运行html文件是不行的