<!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. 用户认证：基于jwt和session的区别和优缺点

    背景知识: Authentication和Authorization的区别: Authentication:用户认证,指的是验证用户的身份,例如你希望以小A的身份登录,那么应用程序需要通过用户名和密码 ...

  2. python 自动化之路

    https://www.cnblogs.com/yangliheng/category/878973.html

  3. ZABBIX安装过程中relocation error报错解决办法

    错误提示: /usr/sbin/zabbix_server: relocation error: /usr/sbin/zabbix_server: symbol mysql_next_result, ...

  4. logging日志——Basic Logging Tutorial

    在logging.basicConfig()函数中可通过具体参数来更改logging模块默认行为,可用参数有: filename,filemode,datefmt,format,level,strea ...

  5. 团队作业4——beta冲刺

    beta冲刺准备 冲刺准备 5天冲刺博客 Beta冲刺一 Beta冲刺二 Beta冲刺三 Beta冲刺四 Beta冲刺五 用户使用报告 用户使用用报告 冲刺总结 冲刺总结随笔 项目码云地址 码云地址

  6. java关于redis的快速配置

    1.关于Jedis安装配置很简单,我主要写一个,能够快速使用redis的工具类,首先导入依赖, 就一个 jedis 最好选用老一点版本 <!-- https://mvnrepository.co ...

  7. sdl2在vs2012上的配置

    网上关于sdl2的配置教程很多,我尽量将我遇到的问题分享给大家. 首先,打开VS2012: 2.点击新建项目:选择空项目,确定即可 (文件名,保存位置,解决方案名称,可以随便填,(我取名为sdlpla ...

  8. foreach 使用 引用& $value . 使用 unset($value)

    1.知识点: 2. 例子 2.1 例子1 . $arr 引用循环, 赋值变量是 &$v ,第一个循环使用后 ,没有 使用unset($v) , $arr2 正常循环, 赋值变量是 $v ,  ...

  9. oo第3次博客作业

    一.规格化设计的发展历史 20世纪60年代,软件出现严重的危机Dijkstra提出了goto语句的危害,由此引发了软件界长达数年的论战,并产生了结构化的程序设计方法.随着计算机 技术的发展,结构设计化 ...

  10. 剑指Offer 60. 把二叉树打印成多行 （二叉树）

    题目描述 从上到下按层打印二叉树,同一层结点从左至右输出.每一层输出一行. 题目地址 https://www.nowcoder.com/practice/445c44d982d04483b04a54f ...