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>

原文地址:https://www.cnblogs.com/zhenguo-chen/p/10454521.html

时间: 2024-11-06 07:28:29

js实现复制内容到粘贴板的相关文章

js复制内容到粘贴板

⒈引入第三方js:   clipboard <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script> <!-- 方式一 --> <input id="inpu" value="https://github.com/zenorocha/clipboard.js.git"

Ubuntu Vim 复制到系统粘贴板

/************************************************************************* * Ubuntu Vim 复制到系统粘贴板 * 说明: * 将Vim中的内容复制到别的应用程序,之前一般都是使用鼠标,现在还是换成 * 直接使用Vim自带功能,这样效率会高那么一点点. * * 2016-11-22 深圳 南山平山村 曾剑锋 ******************************************************

js实现复制内容到剪切板,兼容pc和手机端,支持Safari浏览器

Javascript原生有一些事件:copy.paste.cut, 这些事件可以作用的目标元素: 能获得焦点的元素 (如contentEditable内容能编辑或者可以选中的元素),或者是<body> <div id="cardList"> <div class="btn">点击我,复制我</div> </div> <script type="text/javascript">

《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

JS复制自定义内容到粘贴板

前提:开发过程碰到需要点击一个按钮复制当前模块的链接地址 思路:给当前模块附上链接,然后点击复制 function copyValue(val){ //如果这里换为 input 则不支持换行 var temp = document.createElement('textarea'); temp.value = val; document.body.appendChild(temp); temp.select(); // 选择对象 document.execCommand("Copy")

JS复制文本到粘贴板,前端H5移动端点击按钮复制文本

<span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id="codeBtn" data-clipboard-target="#input">复制</span> js代码 <script type="text/javascript"> function copyArticle(even

js实现复制内容到剪贴板

一. 原生js实现,电脑可以用,手机不可以用 1. 必须是 input元素 才可以使用 <input id="code" type="text" value="www"> <span class="copy-btn" v-on:click="copy">复制</span> //获取input并执行选中 document.getElementById('code').sel

Clipboard.js实现复制内容到剪切板

<script type="text/javascript"> var clipboard1 = new Clipboard('.bt01'); clipboard1.on('success', function (e) { alert("Copy Url Success!"); e.clearSelection(); }); </script> <div class="mt5"><img src=&qu

TextView实现选中复制到系统粘贴板

这是xml文件的代码. <TextView android:id="@+id/main_tv" android:textSize="25sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textIsSelectable="true" android:text="@strin