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

经常会见到网站上各种“一键复制”的友好体验按钮,不局限于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>

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

最高¥2000红包
限量
云产品通用,可叠加官网常规优惠使用 | 限时领取
相关文章

JS实现点击弹出层再点击任意位置隐藏弹出层教程

阅读 68

我们经常使用到弹出层。对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度。我们在使用的...博文来自:建站经验

宝塔BT面板如何有效的清除SSL证书以及缓存新手教程

阅读 55

大鸟有一台机器是5.9升级的6.X的,因为证书还有7天到期,顺手就手动申请了证书,可是怪异的事情发生了,...博文来自:建站经验

通过JS判断浏览器语言后跳转到对应语言(中文和英文)站点

阅读 95

应小伙伴留言版面里面需求写的东西,这种代码百度一下有很多,总结了下最容易理解的一种方法,也是兼容...博文来自:建站经验

WordPress用PHP几比较好呢?PHP7.1与7.2性能对比

阅读 62

去年就已经使用PHP7版本了,那时就说PHP7比老版本快了很多很多,在今年,又分别出了7.1和7.2版本,从 Wo...博文来自:wordpress教程,建站经验

火车头7.6版本如何设置定时采集发布教程

阅读 154

火车头是一款非常方便的采集软件,大家在使用火车头的时候会有一个疑问,他能不能定时采集,要不来回操...博文来自:建站经验

个人网站如何赚钱盈利 明确7种可实现赚钱渠道模式

阅读 179

从互联网开始就有个人网站的存在,我们也看到很多个人站长成功的案例,而且我们很多人也会不断的尝试和...博文来自:建站经验

中小站长如何防范黑客攻击,避免网站遭受损失?

阅读 196

安全一直以来都是各大站长们比较关心的问题,一个网站,如果没有一个安全的系统环境,做得再好,也没什...博文来自:建站经验

推荐几个不错的站长广告联盟

阅读 645

Google广告联盟 Google广Google AdSense 是一种获取收入的快速简便的方法,适合于各种规模的网站发布商...博文来自:建站经验,网站运营

Linux服务器安装宝塔面板

阅读 272

宝塔面板分Linux面板和Windows面板,免费版和专业版,安装宝塔面板前首先要访问宝塔官网查看对应版本进...博文来自:建站经验

网站没备案百度会收录吗?

阅读 397

答:会收录,互联网不是局域网,如果百度只收录备案的网站,那么估计很快就会被其他搜索引擎吃光市场。...博文来自:建站经验

我爱模板网 从零开始学建站,学习技能、解决问题!

每个月,我们帮助开发者解决各种各样的技术问题。并助力他们在技术能力上获得提升。
没有账号? 忘记密码?

社交账号快速登录