通过JS实现一键复制指定内容教程

PetitQ HTML/CSS 2019-3-11 3.59K 0 2

经常会见到网站上各种“一键复制”的友好体验按钮，不局限于 code 的复制，这样友好的体验，方便快捷的操作对访客来说百利无一害。在网上搜索了一番关于“JS 实现一键复制”的文章数不胜数啊。用得较多的就是通过 clipboard.min.js 来实现复制，毕竟现在 Flash 在各浏览器中被禁用等等各种不友好。今天分享一个实用的功能，通过点击事件复制一段文本到剪切板，在网上找了一些，整理了一下，方便需要的朋友使用。

方法一

<a id="copy" data-text="123456">复制文本</a>

```
<script type="text/javascript">
```
```
$(function(){
```

    var clipboard = new Clipboard('#copy',{

```
       text: function(trigger) { 
```
```
          alert("复制成功！");
```

          return trigger.getAttribute('data-text');

```
       }
```
```
    });
```
```
});
```
```
</script>
```

也想出现在这里？联系我们吧

方法二

```
<div>
```

<span id="copyMy"> 复制我试试</span>

<button onClick="copyFn()">点击复制</button>

```
</div>
```
```
<script>
```
```
	function copyFn() {
```

		var val = document.getElementById('copyMy');

		window.getSelection().selectAllChildren(val);

```
		document.execCommand("Copy");
```
```
		alert("已复制好，可贴粘。");
```
```
 
```
```
	}
```
```
</script>
```

方法三

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

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

```
<div class="copybox clearfix">
```
```
  <div class="copybox-n1 clearfix">
```

    <div style="width:232px;float:left;height:36px;overflow:hidden;zoom:1">

      <input type="text" id="mytxt1" value="点击右侧复制按钮复制" class="n1input">

```
    </div>
```

    <div style="width: 48px; height: 36px; position: absolute; margin-left: 232px;*margin-left:0px;_margin-left: 0">

      <button id="copy_input1" class="n1-btn">复制</button>

```
    </div>
```
```
  </div>
```
```
  <div class="copybox-n2 clearfix">
```

    <div style="width:232px;float:left;height:36px;overflow:hidden;zoom:1">

      <input type="text" id="mytxt2" value="点击右侧复制按钮复制" class="n1input">

```
    </div>
```

    <div style="width: 48px; height: 36px; position: absolute; margin-left: 232px;*margin-left:0px; _margin-left:0">

      <button id="copy_input2" class="n1-btn">复制</button>

```
    </div>
```
```
  </div>
```
```
</div>
```
```
<script type="text/javascript">
```
```
  $(function() {
```
```
    /*复制*/
```
```
    $('#copy_input1').zclip( {
```
```
      path : 'js/ZeroClipboard.swf',
```

      copy : function() {return $('#mytxt1').val();/*复制内容*/},

      afterCopy : function() {alert("复制成功");/*复制成功*/}

```
    });
```
```
    /*复制*/
```
```
    $('#copy_input2').zclip( {
```
```
      path : 'js/ZeroClipboard.swf',
```

      copy : function() {return $('#mytxt2').val();/*复制内容*/},

      afterCopy : function() {alert("复制成功");/*复制成功*/}

```
    });
```
```
  });
```
```
</script>
```

方法四

1、下载 clipboard.js 文件。clipboard.js 是一个 github 上的开源项目，可以实现纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。

2、将以下代码放在 footer.php 中，其中 clipboard.min.js 路径请自行修改。

    <script src="JS路径" type="text/javascript"></script>

```
    <script>
```

    var clipboard = new Clipboard( '.itemCopy' );

    clipboard.on('success', function(e){

```
    if(e.trigger.disabled == false ||
```
```
    e.trigger.disabled == undefined) {
```
```
    e.trigger.innerHTML="复制成功";
```
```
    e.trigger.disabled = true;
```
```
    setTimeout(function() {
```
```
    e.trigger.innerHTML="一键复制";
```
```
    e.trigger.disabled = false;
```
```
    },2000);
```
```
    }
```
```
    });
```
```
    clipboard.on('error', function(e) {
```
```
    e.trigger.innerHTML="复制失败";
```
```
    });
```
```
    </script>
```

3、在 header.php 头部引入以下 amazeui.css 文件。以下 amazeui-2.css 文件引入的是无删减版，大家也可以使用压缩包里面的 amazeui.css 文件，自行选择即可。

<link rel="stylesheet" href="https://tu2.aitao779.com/amazeui-2.css ">

4、在文章中引用按钮代码。在编写文章的时候，将代码放在合适的位置，把 data-clipboard-text 的值“复制的内容”修改成指定的内容即可。

<button class="itemCopy am-btn am-btn-warning am-round am-btn-xs" id="TKLS"  type="button" data-clipboard-text="复制的内容">一键复制</button>

到这里差不多就完成了，说实话我自己都觉得有点粗糙。但是在摸索的路上收获颇多。也希望路过的大佬们，来指点和优化下代码，做出更好更方便的复制功能。

通过 JS 实现一键复制指定内容教程

已有 897 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

HTML/CSS

通过JS实现一键复制指定内容教程

方法一

方法二

方法三

方法四

通过 JS 实现一键复制指定内容教程

相关文章

CSS元素隐藏后JS事件响应

如何给网页表单添加滑动验证

网站侧边添加梅花飘落特效

发表回复取消回复

热销模板

HTML/CSS

方法一

方法二

方法三

方法四

通过 JS 实现一键复制指定内容教程

相关文章

发表回复 取消回复

热销模板

发表回复取消回复