<!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. d3js可视化策略

    d3js是数据驱动图形的思路.基本可以这么理解,有什么样的图形,后面基本就有类似结构的数据.大概思路步骤如下: 一.适配数据格式 这一步主要是为第二部服务,第一步的结果作为第二部的入参. 比如,画层级 ...

  2. 常用的settings.xml文件

    <?xml version="1.0"?> <settings> <localRepository>/Users/bernie.cx/.m2/r ...

  3. python学习笔记：2.python基础

    4.27 01,pycharm 安装使用. 011,昨日内容回顾.     编译型:         将代码一次性全部编译成二进制,然后运行.         优点:执行效率高.         缺点 ...

  4. python builtin列表

    Python Builtin function获得通过 python3 -c "import builtins;ff=open('test.txt','w');strlist=[(i+'\n ...

  5. Jmeter性能结果分析

    1.压测结果指标 Samples:表示一共发出的请求数 Average:平均响应时间,默认情况下是单个Request的平均响应时间(ms) Error%:测试出现的错误请求数量百分比.若出现错误就要看 ...

  6. python 实现程序重启

    def restart_program(): """Restarts the current program. Note: this function does not  ...

  7. PTA --- 时间复杂度 选择题

    1-1 2​N​​和N​N​​具有相同的增长速度. (2分) T         F 作者: DS课程组 单位: 浙江大学 1-2 (NlogN)/1000是O(N)的. (1分) T         ...

  8. 电脑小知识-win10

    设置开机自启 一直想设置几个软件开机自启,尤其是文件搜索类和截图软件,不然每次打开电脑都要双击好几个工具,下面就记录一下如何设置开机自启. 1.先打开咱们的任务管理器,看看都有什么是开机自启的: 可以 ...

  9. 家庭版Windows10没有远程桌面的问题

    https://github.com/stascorp/rdpwrap/releases

  10. 蓝牙协议分析(12)_LQ和RSSI的原理及应用场景

    在蓝牙协议栈的物理层,有这样两个比较有用的参数:LQI和RSSI.它们都是通过接收端,判断当前无线环境的质量(链路质量),以指导后续的动作.但这两个数值的计算原理和使用场景又有很大的差别. LQI ( ...