项目中经常会遇到点击按钮复制订单号、订单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. brew更换国内源

    来源:清华大学开源软件镜像站(https://mirror.tuna.tsinghua.edu.cn/help/homebrew/) 替换现有上游 1 # brew 程序本身,Homebrew/Lin ...

  2. Spring boot AOP 记录请求日志

    如何将所有的通过url的请求参数以及返回结果都输出到日志中? 如果在controller的类中每个方法名都写一个log输出肯定是不明智的选择. 使用spring的AOP功能即可完成. 1. 在pom. ...

  3. 图的广度优先遍历算法(BFS)

    在上一篇文章我们用java演示了图的数据结构以及图涉及到的深度优先遍历算法,本篇文章将继续演示图的广度优先遍历算法.广度优先遍历算法主要是采用了分层的思想进行数据搜索.其中也需要使用另外一种数据结构队 ...

  4. 织梦(DedeCms)的安全问题解决办法

    网上大家也看到DEDECMS这套程序,虽然便捷草根站长的快速建站,但安全问题也是非常多的.DEDE官方也在很久之前就已经不再对这套系统进行什么版本升级了,最多就是一些补丁修复: 好,废话不多说,下面整 ...

  5. NodeRED - 全局变量的使用笔记

    NodeRED - 全局变量的使用笔记 global global.get(..) :获取全局范围的上下文属性 global.set(..) :设置全局范围的上下文属性 global.keys(..) ...

  6. C/C++函数与变量前面的标识符的作用

    ​​ 作者:良知犹存 转载授权以及围观->欢迎添加Wx:Allen-Iverson-me-LYN 缅怀逝者,向英雄致敬.愿山河无恙,国泰民安. 在用C/C++写代码的时候我们经常会使用一些标识符 ...

  7. 关于KMP算法的理解

    上次因为haipz组织的比赛中有道题必须用到KMP算法,因此赛后便了解了下它,在仔细拜读了孤~影神牛的文章之后有种茅塞顿开的感觉,再次ORZ. 附上链接http://www.cnblogs.com/y ...

  8. Codeforces Round #654 (Div. 2) D. Grid-00100 (构造)

    题意:构造一个\(n\)x\(n\)只含\(0\)和\(k\)个\(1\)的矩阵,统计每一行每一列\(1\)的sum,然后构造一个权值最大行和最小行的差的平方加权值最大列和最小列的差的平方的最小和(\ ...

  9. PowerShell随笔6---ISE

    简单的命令可以通过控制台窗口输入执行,但是我的脚本逻辑复杂,需要保存.总不能在命令行工具中执行吧. 关了窗口,啥都没了.有没有一个IDE,有. 在PowerShell命令行窗口中输入:ISE,就会打开 ...

  10. TextCNN代码实践

    在上文<TextCNN论文解读>中已经介绍了TextCNN的原理,本文通过tf2.0来做代码实践. 数据集:来自中文任务基准测评的数据集IFLYTEK 导库 import os impor ...