项目中经常会遇到点击按钮复制订单号、订单id等内容到粘贴板中的需求。可是通常我们都是用Ctrl + c或右击复制的,别操心,js也是有复制命令的,那就是document.execCommand('copy'); 这个命令会将选中的内容复制到粘贴板中,那岂不是还需要选中?别急input和textarea元素有一个select()方法,这个方法可以帮我们自动选中。于是就有了下面的代码,复制过去试试吧!

1
2
3
4
5
6
7
8
9
10
11
function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('readonly''readonly'); // 防止手机上弹出软键盘
    input.setAttribute('value', text);
    document.body.appendChild(input);
    // input.setSelectionRange(0, 9999);
    input.select();
    var res = document.execCommand('copy');
    document.body.removeChild(input);
    return res;
}

  思路分析:

  1. 创建input或textarea,因为这两个DOM具有select方法,可以选中内容(document.execCommand('copy')复制内容必要条件);
  2. 给input赋值为需要赋值的内容
  3. 将DOM添加到文档中
  4. 选中输入框中的值(也就是要复制的值)
  5. 执行复制命令
  6. 最后别忘了从文档中移除DOM元素
  7. 此函数最后返回了复制是否成功的结果(true/false,document.execCommand('copy')本身会返回true/false),你可以做相应的交互提示等。

js实现复制粘贴的更多相关文章

  1. js 实现复制粘贴

    js 实现复制粘贴 <!DOCTYPE html> <html><head> <meta http-equiv="Content-Type" ...

  2. js 实现复制粘贴文本过滤(保留文字和图片)

    实现复制粘贴文本过滤(保留文字和图片) demo如下: <head> <meta http-equiv="Content-Type" content=" ...

  3. 通过如何通过js实现复制粘贴功能

    在ie中window.clipboardData(剪切板对象)是可以被获取,所以利用这个方法我们可以实现在IE当中复制粘贴的功能,demo如下! <html> <head> & ...

  4. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  5. 在html页面通过js实现复制粘贴功能

    前言:要实现这个功能,常用的方式大概分为两类,第一种就是上插件,这个网上有大把,第二种就是直接用几行JS来实现. 这次说第二种实现方式,这方式有很大的局限性,只能用表单元素,并且不能设置disable ...

  6. JS ----实现复制粘贴功能 (剪切板应用clipboardData)

    注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...

  7. [JavaScript] 怎么使用JS禁止复制粘贴

    1. 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格键右边的windows键也可以激活这个快捷菜单 <table border oncontextmenu=re ...

  8. js 实现复制粘贴时注意方法中需要两次点击实现的bug

    方法一:利用ZeroClipboard 详见 :http://www.jb51.net/article/22403.htm 1先引入 <script type="text/javasc ...

  9. js禁止复制粘贴

    1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键,其实是禁止快捷菜单,因为不光右键可以弹出这个菜单,键盘上空格 ...

随机推荐

  1. go-zero解读与最佳实践(上)

    本文有『Go开源说』第三期 go-zero 直播内容修改整理而成,视频内容较长,拆分成上下篇,本文内容有所删减和重构. 大家好,很高兴来到"GO开源说" 跟大家分享开源项目背后的一 ...

  2. sh 脚本名字和./脚本名字有什么区别

    sh xxx用 sh 这个shell (sh一般指系统默认shell,比如 bash, ksh, Csh 等都有可能) 来解释和运行 xxx 这个脚本.xxx 文件不必具有可执行属性(chmod +x ...

  3. Codeforces Round #650 (Div. 3) A. Short Substrings

    题目链接:https://codeforces.com/contest/1367/problem/A 题意 给出一个字符串 $t$,找出原字符串 $s$,$t$ 由 $s$ 从左至右的所有长为 $2$ ...

  4. UVALive 7276 Wooden Signs

    详细题目见:http://7xjob4.com1.z0.glb.clouddn.com/0f10204481da21e62f8c145939e5828e 思路:记dp[i][j]表示第i个木板尾部在j ...

  5. 迷宫城堡 HDU - 1269 判断有向图是否是强连通图

    为了训练小希的方向感,Gardon建立了一座大城堡,里面有N个房间(N<=10000)和M条通道(M<=100000),每个通道都是单向的,就是说若称某通道连通了A房间和B房间,只说明可以 ...

  6. Codeforces Round #295 (Div. 2) B. Two Buttons (DP)

    题意:有两个正整数\(n\)和\(m\),每次操作可以使\(n*=2\)或者\(n-=1\),问最少操作多少次使得\(n=m\). 题解:首先,若\(n\ge m\),直接输出\(n-m\),若\(2 ...

  7. Ubuntu中Unable to acquire the dpkg frontend lock (/var/lib/dpkg/lock-frontend)问题的解决

    参考博客:https://blog.csdn.net/shimadear/article/details/90598646 问题描述: 解决方法: 第一种情况: 进程中存在与apt相关的正在运行的进程 ...

  8. 9.PowerShell DSC之Pull

    前言 一般生产环境都使用Pull模式 配置Pull Server 配置Pull Server需要安装两个WindowsFeture:IIS.windows DSC,这两都可以通过UI界面化引导安装,也 ...

  9. LSTM - 长短期记忆网络

    循环神经网络(RNN) 人们不是每一秒都从头开始思考,就像你阅读本文时,不会从头去重新学习一个文字,人类的思维是有持续性的.传统的卷积神经网络没有记忆,不能解决这一个问题,循环神经网络(Recurre ...

  10. MHA 高可用介绍

    目录 MHA 介绍 MHA 简介(Master High Availability) MHA 工作原理(转载) MHA 架构 MHA 工具 Manager 节点 Node 节点 MHA 优点 MHA ...