技术控

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

[其他] JavaScript Copy to Clipboard

[复制链接]
那傷丶壹直繞 发表于 2016-10-7 18:01:25
209 2
"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!
shennianxu 发表于 2016-10-13 21:57:11
看完回帖,THX
回复 支持 反对

使用道具 举报

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

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/c.CoLaBug.com ( 粤ICP备05003221号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表