HTML实现复制功能
生活随笔
收集整理的這篇文章主要介紹了
HTML实现复制功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.CSS實現復制功能
body {unselectable: all;-moz-user-select: all;onselectstart: all;-webkit-user-select: all; }給body設置這四個屬性，就可以右鍵進行復制了。
2.使用clipboard.js進行復制
js文件下載地址：https://clipboardjs.com/
單個復制的寫法(可以直接復制粘貼使用)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>復制粘貼</title> </head> <body><a href="javascript:void(0);" id="rcopy" onclick="copy('a','b')">點我復制</a><script src="../lib/clipboard.js"></script><script src="../lib/jquery-2.1.4.js"></script><script type="text/javascript">function copy(a,b) {var clipboard = new ClipboardJS('#rcopy', {text : function() {return a + '-' + b;}});clipboard.on("success", function(e) {console.log(e);alert(e.text+'復制成功');clipboard.destroy();});clipboard.on("error", function(e) {console.log(e);alert('復制失敗');clipboard.destroy();});}</script> </body> </html>對ajax請求回來的數據動態的對單個數據進行復制(不可直接復制粘貼使用)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>復制粘貼</title> </head> <body><script src="../lib/clipboard.js"></script><script src="../lib/jquery-2.1.4.js"></script><script type="text/javascript">//此處的html為ajax請求之后向頁面添加元素var html= '<a href="javascript:void(0);" id="rcopy'+r[i][1]+r[i][2]+'" onclick="copy(\''+r[i][1]+'\',\''+r[i][2]+'\')"></a>'; function copy(a,b) {var clipboard = new ClipboardJS('#rcopy' + a + b, {text : function() {return a + '-' + b;}});clipboard.on("success", function(e) {console.log(e);alert(e.text+'復制成功');clipboard.destroy();});clipboard.on("error", function(e) {console.log(e);alert('復制失敗');clipboard.destroy();});}</script> </body> </html>?如果使用clipboard.js過程中出現：Clipboard is not defined這樣的報錯，看下引用的clipboard.js的版本號：
?2.0.4對應上面的對clipboard.js進行實例化的代碼new ClipboardJS，版本為1.7.1之類的實例化時使用new Clipboard。（注：此處為小編個人理解，如有不對，請多指教。）
?
?
總結
以上是生活随笔為你收集整理的HTML实现复制功能的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python中颜色表_python 颜色
- 下一篇： 2017年html5行业报告,云适配发布