无需Flash无需依赖任何JS库实现文本复制与剪切
推荐

无需Flash无需依赖任何JS库实现文本复制与剪切
我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的。今天我要给大家介绍的是一款极现代的,不需要flash,不依赖任何其他js库的非常小的插件,它叫clipboard.js。
首先加载本地clipboard.js文件。
<script src="clipboard.min.js"></script> 
然后就是在body中加上要复制或剪切的文本域内容以及按钮。
<input id="foo" value="http://www.helloweba.com/demo/clipboard/"> 
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功!">复制</button> 

这里,我们使用了HTML5的data-属性,用来定位复制对象目标,它指向了文本域#foo,说明复制的是#foo中的value内容,aria-label属性定义了复制成功后的信息,用来提示复制结果信息。

还有个属性data-clipboard-action,它定义当前操作是复制还是剪切,默认是复制,当data-clipboard-action="cut",这时,点击按钮将会剪切文本,跟WORD操作一样。当然,剪切操作仅适用于text和textarea。

我们也可以不需要input和textarea等元素内容作为复制对象,我们可以将要复制的内容通过ata-clipboard-text属性定义在按钮上,点击按钮就可以复制到ata-clipboard-text对应的内容。

<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功!">复制</button> 
将以下一句代码加入到</body>前的<script>里,保存打开浏览,点击按钮即可复制。
new Clipboard('.btn'); 
当然我们可以再进一步处理,比如当复制完成后,提示复制成功信息更友好些,只要执行以下代码即可:
var clipboard = new Clipboard('.btn'); 
 
clipboard.on('success', function(e) { 
    var msg = e.trigger.getAttribute('aria-label'); 
    alert(msg); 
 
    e.clearSelection(); 
}); 

版权属于:够过瘾——挨踢男的葵花宝典

文章标签:clipboardjs

文章链接:http://www.gouguoyin.cn/js/76.html

转载时必须以链接形式注明原始出处及本声明。

如果您觉得本文对您有所帮助,请小额赞助一下,我会优先回答您在使用过程中出现的问题,点此赞助

如有疑问或遇到技术问题,请加官方QQ群: 421537504   GoCMS官方交流群

文章点评:

表情

32条评论

  • olsang 1年前
    学习一下 谢谢分享
  • 雨中路人 1年前
    能兼容手机端么
  • aiya112 1年前
    能兼容手机端么
  • cjw908 2年前
    谢谢分享
  • 伟伟 2年前
    复制的文本在div里,不在input里可不可以复制?
  • 伟伟 2年前
    刚好需要,试试,谢谢大神啦
  • tteesstt 2年前
    ~~~~~~~~~~~~~~~~~~~~~~~~
  • alfred 2年前
    好东西,不知道手机端好不好用
  • 轻花微落 2年前
    踏破铁鞋无觅处,得来全不费功夫,无意中看到的,试试
  • skyjerry 2年前
    试试
  • invinbg 2年前
    一直在找,这下总算找到了
  • silent 2年前
    很实用
  • sunnyboy 2年前
    很不错,给个赞
  • 讯风 2年前
    。。。。
  • hyson 2年前
    正好需要这个东东,之前在PC的复制到手机就没有用了
  • kikyo 2年前
    cs
  • 645641 2年前
    打算
  • 锋神 3年前
    学习一下
  • shtanwei 3年前
    这个正好有一个复制
    • 够过瘾 回复 shtanwei #1 3年前
  • TJZX 3年前
    看了下面的评论,IE不支持。其实,IE本身就有复制的函数。
    • 够过瘾 回复 TJZX #1 3年前
      谢谢