技术控

    今日:98| 主题:49390
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] JavaScript Copy to Clipboard

[复制链接]
那傷丶壹直繞 发表于 2016-10-7 18:01:25
101 2

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
"Copy to clipboard" functionality is something we all use dozens of times daily but the client side API around it has always been lacking; some older APIs and browser implementations required a scary "are you sure?"-style dialog before the content would be copied to clipboard -- not great for usability or trust.  About seven years back    I blogged about ZeroClipboard, a solution for copying content to the clipboard in a more novel way...  
  ...and by novel way I mean using Flash.  Hey -- we all hate on Flash these days but functionality is always the main goal and it was quite effective for this purpose so we have to admit it was a decent solution.  Years later we have a better, Flash-free solution:    clipboard.js.  
      View Demo  
  The clipboard.js API for copy to clipboard is short and sweet.  Here are a few uses:
  Copying and Cutting Values of Textarea and Input

  1. /* Textarea - Cut
  2. hello
  3. Cut
  4. */
  5. var clipboard = new Clipboard('.copy-button');

  6. /* Input - Copy

  7. Copy
  8. */
  9. var clipboard = new Clipboard('.copy-button');
复制代码
Copying Element innerHTML

  1. /* HTMLElement - Copy
复制代码
hello
  */ var clipboard = new Clipboard('.copy-button');
      Targetand    TextFunctions  

  1. // Contents of an element
  2. var clipboard = new Clipboard('.copy-button', {
  3.     target: function() {
  4.         return document.querySelector('#copy-target');
  5.     }
  6. });

  7. // A specific string
  8. var clipboard = new Clipboard('.copy-button', {
  9.     text: function() {
  10.         return 'clipboard.js is awesome!';
  11.     }
  12. });
复制代码
Events

  1. var clipboard = new Clipboard('.btn');

  2. clipboard.on('success', function(e) {
  3.     console.log(e);
  4. });

  5. clipboard.on('error', function(e) {
  6.     console.log(e);
  7. });
复制代码
     View Demo  
  No Flash with a simple API and working in all major browsers makes clipboard.js a huge win for the web and its users.  The days of Flash shimming functionality on the client side are over -- long live web technology!
友荐云推荐




上一篇:為何 Startup 不該用 Swift
下一篇:People don’t leave companies. They leave leaders!
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

shennianxu 发表于 2016-10-13 21:57:11
看完回帖,THX
回复 支持 反对

使用道具 举报

nvrus643 发表于 2016-11-7 18:11:00
学习下
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表