<!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. 201671010142 2017-2 《java第九章学习感悟》

    一,数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. 二.几种重要 ...

  2. node.js学习6---第三方依赖(模块或者说是包)的导入 npm 以及 cnpm命令的使用

    npm命令用于导入node.js的第三方包,相当于java中使用maven来导入第三方依赖: 1.npm init -y 命令:在命令窗口中执行后,会出现如下的json文件: 右边记录了安装的第三方包 ...

  3. while循环与 for循环，函数定义与调用

    import turtle turtle.setup(600,400,0,0) turtle.bgcolor('red') turtle.color('yellow') turtle.fillcolo ...

  4. 分布式大数据系统离线分析技术解决方案(spark2.x)

    一.sark2.x新型的架构系统

  5. Vue语法学习第二课——指令

    指令,是指在Vue中,带有-v前缀的特殊特性 指令特性的值预期是单个JavaScript表达式(v-for例外) <p v-if="seen">看得到</p> ...

  6. vue学习笔记——篇3

    1.绑定计算后数据,三种方式: >1.红色框,通过method >2.黄色框,通过computed >3.蓝色框,通过watch 推荐computed,vue对computed做了缓 ...

  7. golang中的mutex锁

    mutex锁中一种互斥锁,如果有多个goroutine需要对同一变量进行修改则需要对该变量施加mutex锁以实现安全读写.

  8. Unix代码分析

    世存最早的unix源代码:http://minnie.tuhs.org/cgi-bin/utree.pl?file=PDP7-Unix/sys 世存最早的cc:http://minnie.tuhs.o ...

  9. java面向对象编程(九)--final

    1.final概念 final可以修饰变量或者方法.在某些情况下,程序员可能有以下需求: a.当不希望父类的某个方法被子类覆盖(override)时,可以用final关键字修饰. b.当不希望类的某个 ...

  10. Android第二次作业

    另一成员链接:https://www.cnblogs.com/2575590018dqy/p/10053353.html