<!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8" />

     <title>js复制内容到粘贴板</title>

     <style>

       .flex-r {

         display: flex;

         flex-direction: row;

         align-content: center;

         justify-content: space-between;

       }

       .info {

           max-width: 400px;;

         margin-bottom: 20px;

         background-color: bisque;

       }

       dl {

         margin: 0;

         padding: 0 30px;

         width: 200px;

       }

       .copy{

         cursor: pointer;

         margin: 0 10px;

       }

     </style>

   </head>

   <body>

     <div class="bank_info">

       <div class="flex-r info">

         <dl class="flex-r aln-star">

           <dt>收款银行：</dt>

           <dd>建设银行</dd>

         </dl>

         <span class="copy" onclick="mmcopy(this)">复制</span>

       </div>

       <div class="flex-r info">

         <dl class="flex-r aln-start">

           <dt>收款账户名：</dt>

           <dd>张三</dd>

         </dl>

         <span class="copy" onclick="mmcopy(this)">复制</span>

       </div>

     </div>

     <!--引入jQuery插件 -->

     <script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>

     <script>

       function mmcopy(e) {

         if (document.execCommand("copy")) {

           var txt = ""; // 需要复制的文字

           txt += $(e)

             .siblings("dl")

             .find("dt")

             .text();

           txt += $(e)

             .siblings("dl")

             .find("dd")

             .text();

           const input = document.createElement("input"); // 创建一个新input标签

           input.setAttribute("readonly", "readonly"); // 设置input标签只读属性

           input.setAttribute("value", txt); // 设置input value值为需要复制的内容

           document.body.appendChild(input); // 添加input标签到页面

           input.select(); // 选中input内容

           input.setSelectionRange(0, 9999); // 设置选中input内容范围

           document.execCommand("copy"); // 复制

           document.body.removeChild(input);  // 删除新创建的input标签

         }

       }

     </script>

   </body>

 </html>

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

  1. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  2. js插件实现点击复制内容到粘贴板，兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

  3. 原生js实现复制文本到粘贴板

    项目中经常会遇到点击按钮复制订单号.订单id等内容到粘贴板中的需求.可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('co ...

  4. js复制内容到粘贴板

    点击右边内容:<span onclick="copyContent(this);" title="点击复制">啊,我被复制了</span> ...

  5. vue 复制内容到粘贴板

    首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...

  6. js 复制内容到粘贴板的兼容性

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

  7. vue复制textarea文本域内容到粘贴板

    vue实现复制内容到粘贴板   方案:找到textarea对象(input同样适用),获取焦点,选中textarea的所有内容,并调用document.execCommand("copy&q ...

  8. 用js实现复制内容到操作系统粘贴板(兼容IE、谷歌、火狐等浏览器)

    一.如果只考虑IE浏览器,可以直接用原声js实现 if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将 ...

  9. js 复制文字、 复制链接到粘贴板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. vue 路由(1)

    路由的使用  (5步) 1.首先安装路由  npm install  vue-router2.引入 vue-router import VueRouter from 'vue-router' 3.使用 ...

  2. 关于Apache的配置方法和步骤

    一.下载.安装和卸载 网址:https://httpd.apache.org/docs/current/platform/windows.html#down 点击ApacheHaus,在里面下载任何版 ...

  3. xenserver添加磁盘后挂载为本地存储库并且删除

    方法一: 1.1:查看磁盘列表 fdisk -l [root@xenserver ~]# fdisk -l Disk /dev/sdb: 7999.4 GB, 7999376588800 bytes, ...

  4. 最佳sql server 分页查询

    用关键字查询 并作为条件是最快的,比其他嵌套select性能都要好 select top 100 id , name from tablex where id >preid order by i ...

  5. Python列表的增删改查和元祖

    一.定义列表 1.names = ['mike','mark','candice','laular'] #定义列表 2.num_list = list(range(1,10)) #range生成1-1 ...

  6. volatile 与 JVM 指令重排序

    前言: 在做单例模式时 有博客在评论区 推荐使用 volatile 关键字 进行修饰 然后用了两天时间查资料看文档 发现涉及的面太广 虽然已经了解为什么要使用 volatile + synchroni ...

  7. sprigmvc 传值jsp页面

    https://blog.csdn.net/qq_41357573/article/details/84675535#如何将controller层值传递到jsp页面

  8. 第九章：Servlet工作原理解析

    9.1 从Servlet容器说起 Servlet和Servlet容器的关系,就像枪和子弹的关系,彼此依存又互相独立发展,这一切都是为了适应工业化生产.从技术角度来说,是为了解耦,通过标准化接口来互相协 ...

  9. 模拟post/get请求 类似于google的postman

    下载地址:https://www.getpostman.com/apps

  10. python2入门（3）

    六.python列表(List) python最常见的序列类型python列表List使用[]表示,元素之间以逗号分隔,元素类型不需要相同 内置操作: list = [1,2,3,'four'] li ...