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

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实现复制内容到粘贴板

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. js 复制文本到粘贴板

    //html 在iOS Safari中,剪贴板API有一些限制(实际上是安全措施):   于安全原因,iOS Safari只允许容器中的document.execCommand('copy')文本co ...

  3. JS复制文本到粘贴板,前端H5移动端点击按钮复制文本

    <span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id=&qu ...

  4. js 复制文字、 复制链接到粘贴板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js点击按钮复制内容到粘贴板

    复制内容到粘贴板,就是要选择需要复制的内容并执行document.execCommand("copy")命令: //复制内容到粘贴板 function copyToClipboar ...

  6. Ubuntu Vim 复制到系统粘贴板

    /************************************************************************* * Ubuntu Vim 复制到系统粘贴板 * 说 ...

  7. js插件实现点击复制内容到粘贴板,兼容IE8

    先来看下本次需要导入的文件: 第一个是jquery.js,这个不多说: 第二个是jquery.zclip.js,第三个是zeroClipboard.swf ,这两个文件的下载链接:http://www ...

  8. vue 复制内容到粘贴板

    首先是npm安装依赖包:npm install clipboard --save 导入组件:import Clipboard from "clipboard"; html如图: c ...

  9. 怎样使用js将文本复制到系统粘贴板中

    需要使用到三个document方法: 1. document.execCommand(); 执行某个命令 2. document.queryCommandSupported(); 检测浏览器是否支持某 ...

随机推荐

  1. Luogu P4503 [CTSC2014]企鹅QQ(字符串哈希)

    P4503 [CTSC2014]企鹅QQ 题面 题目背景 \(PenguinQQ\) 是中国最大.最具影响力的 \(SNS(Social Networking Services)\) 网站,以实名制为 ...

  2. Hackerrank--XOR love (Math系列)

    题目链接 Devendra loves the XOR operation very much which is denoted by ∧ sign in most of the programmin ...

  3. HDU 4584

    //也是简单题,因为n太小,故暴力之! #include<stdio.h> #include<math.h> #include<string.h> #define ...

  4. 【JZOJ5363】【NOIP2017提高A组模拟9.14】生命之树 Trie+启发式合并

    题面 45 在比赛中,我只想到了45分的暴力. 对于一个树中点对,相当于在他们的LCA及其祖先加上这个点对的贡献. 那么这个可以用dfs序+树状数组来维护. 100 想法 我想到了可能要用trie树来 ...

  5. 2019.9.17 csp-s模拟测试45 反思总结

    来了来了,垃圾二连.[指两次发博客] 看了一下题就匆匆回去上课,在课上一边听课一边水oi,大概用1h40min的时间想完三道题.最后回到机房只剩下40min的时间敲代码,于是T1骗了70分就走了… 这 ...

  6. Redhat/Fedora 网络接口的配置文件和网络接口专用配置工具

    在Redhat/Fedora 中,与乙太网卡相关的配置文件位于 /etc/sysconfig/network-scripts目录中,比如 ifcfg-eth0.ifcfg-eth1 .... .... ...

  7. 【洛谷P2907】 【USACO08OPEN】农场周围的道路 水模拟分治

    P2907 [USACO08OPEN]农场周围的道路Roads Around The Farm 题目描述 Farmer John's cows have taken an interest in ex ...

  8. CSS Tools: Reset CSS

    样式初始化 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ ...

  9. HDU 1724 自适应辛普森法

    //很裸的积分题,直接上模板 #include<stdio.h> #include<math.h> int aa, bb; //函数 double F(double x){ - ...

  10. Ubuntu中NS2安装详细教程

    前言: NS2是指 Network Simulator version 2,NS(Network Simulator) 是一种针对网络技术的源代码公开的.免费的软件模拟平台,研究人员使用它可以很容易的 ...