js实现复制内容到粘贴板
Posted huyueshan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现复制内容到粘贴板相关的知识，希望对你有一定的参考价值。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>js复制内容到粘贴板</title> 6 <style> 7 .flex-r { 8 display: flex; 9 flex-direction: row; 10 align-content: center; 11 justify-content: space-between; 12 } 13 .info { 14 max-width: 400px;; 15 margin-bottom: 20px; 16 background-color: bisque; 17 } 18 dl { 19 margin: 0; 20 padding: 0 30px; 21 width: 200px; 22 } 23 .copy{ 24 cursor: pointer; 25 margin: 0 10px; 26 } 27 </style> 28 </head> 29 30 <body> 31 <div class="bank_info"> 32 <div class="flex-r info"> 33 <dl class="flex-r aln-star"> 34 <dt>收款银行：</dt> 35 <dd>建设银行</dd> 36 </dl> 37 <span class="copy" onclick="mmcopy(this)">复制</span> 38 </div> 39 <div class="flex-r info"> 40 <dl class="flex-r aln-start"> 41 <dt>收款账户名：</dt> 42 <dd>张三</dd> 43 </dl> 44 <span class="copy" onclick="mmcopy(this)">复制</span> 45 </div> 46 </div> 47 48 <!--引入jQuery插件 --> 49 <script src="./js/jquery.min.js"></script> 50 <script> 51 function mmcopy(e) { 52 if (document.execCommand("copy")) { 53 var txt = ""; // 需要复制的文字 54 txt += $(e) 55 .siblings("dl") 56 .find("dt") 57 .text(); 58 txt += $(e) 59 .siblings("dl") 60 .find("dd") 61 .text(); 62 const input = document.createElement("input"); // 创建一个新input标签 63 input.setAttribute("readonly", "readonly"); // 设置input标签只读属性 64 input.setAttribute("value", txt); // 设置input value值为需要复制的内容 65 document.body.appendChild(input); // 添加input标签到页面 66 input.select(); // 选中input内容 67 input.setSelectionRange(0, 9999); // 设置选中input内容范围 68 document.execCommand("copy"); // 复制 69 document.body.removeChild(input); // 删除新创建的input标签 70 } 71 } 72 </script> 73 </body> 74 </html>
以上是关于js实现复制内容到粘贴板的主要内容，如果未能解决你的问题，请参考以下文章