项目中经常会遇到点击按钮复制订单号、订单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. javascript基础:语法与html结合方式

    一.基本语法: 1.与html结合方式 1.内部JS: *  定义<script>,标签体内容就是JS代码 2.外部JS: *  定义<script>,通过src属性引入外部的 ...

  2. git pull拉取远程分支时出现冲突

    现象:在git clone一个项目后,默认是master分支,但是如果想要切换到另一个已经存在的dev分支,那么不要先在本地创建dev分支再拉取远程的dev分支,而是应该直接切换到dev分支,然后再拉 ...

  3. Javascript-简单的欢迎cookie

    0<!DOCT0000YPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml&quo ...

  4. 20190719-FirstZero

    这也许也是一个成就吧? First Zero 考试 第一次 爆0 好了好了. T1 你永远不知道你在想什么. 我仿佛想出一个$\Theta(NM\log^2 N)$的$dfs$??? 蒟蒻原地爆炸 T ...

  5. nginx的四个基本功能

    Nginx能做什么 1.反向代理2.负载均衡3.HTTP服务器(包含动静分离)4.正向代理 以上就是做网站小编了解到的Nginx在不依赖第三方模块能处理的事情,下面详细说明每种功能怎么做 1.反向代理 ...

  6. HTML:如何将网页分为上下两个部分

    1.使用table: <table>  <tr>    <td height="80%"><jsp:include page=" ...

  7. 提升mysql服务器性能(索引与查询优化)

    原文:提升mysql服务器性能(索引与查询优化) 版权声明:皆为本人原创,复制必究 https://blog.csdn.net/m493096871/article/details/90138407 ...

  8. hdu 1711Number Sequence (KMP入门,子串第一次出现的位置)

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  9. vue制作幻灯片-左右移动

    组件中: <template> <div class="slide-show" @mouseover="clearInv" @mouseout ...

  10. RestController注解下返回到jsp视图页面(转)

    这个问题我也遇到过,下面的方法可以试试 蓝萝卜blu @RestController注解下返回到jsp视图页面 spring4.1中添加了@RestController注解很方便,集成了@Respon ...