项目中经常会遇到点击按钮复制订单号、订单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. 实例详解TOP命令

    Linux中的top命令显示系统上正在运行的进程.它是系统管理员最重要的工具之一.被广泛用于监视服务器的负载.在本篇中,我们会探索top命令的细节.top命令是一个交互命令.在运行top的时候还可以运 ...

  2. spring源码学习之bean的加载(三)

    接着二中的继续写,那个都超过1000行了,哈,需要重新写一个,要不太长了,我都看不下去了 7.4 初始化bean doCreateBean函数中有这样一行代码:这行代码中initializeBean函 ...

  3. [转]JS设计模式-单例模式(二)

    单例模式是指保证一个类仅有一个实例,并提供一个访问它的全局访问点. 单例模式是一种常用的模式,有一些对象往往只需要一个,比如线程池.全局缓存.浏览器中的window对象等.在javaScript开发中 ...

  4. JSP-Cookie和Session

    1 会话技术简介 1.1 存储客户端状态 1.2 会话技术 2 Cookie技术 2.1 Cookie技术的购物 2.2 服务器端向客户端发Cookie //1.创建cookie对象 Cookie c ...

  5. java-面向对象-封装-this-构造函数

    概要图 一 构造函数 需求:为了描述事物更准确,发现事物对应的很多对象一创建时, 就有了,一些初始化的数据.在类中该如何完成的.   通过Java中的另一个小技术完成:就是构造函数.对象本身就是构造出 ...

  6. RQNOJ PID192 梦幻大PK [2017年6月计划 二分图02]

    PID192 / 梦幻大PK ☆ 提交你的代码 查看讨论和题解 你还木有做过哦 我的状态         查看最后一次评测记录 质量 7 题目评价 质量 7 ★★★★★ ★★★★☆ ★★★☆☆ ★★☆ ...

  7. 【P3056】【USACO12NOV】笨牛Clumsy Cows

    P3056 [USACO12NOV]笨牛Clumsy Cows 题目描述 Bessie the cow is trying to type a balanced string of parenthes ...

  8. Sorry, the page you are looking for is currently unavailable. Please try again later. Nginx

    访问html可以正常访问,但是访问PHP则错误,原因: nginx不能正常通过FastCGI结果访问PHP 查看php-fpm是否正常运行: 果然没有,重启php-fpm: /etc/init.d/p ...

  9. C# 通过URL得到图片的问题

    第一个方法在读取某些图片会报错 public static Image get_Fill_image(string url) { var image = new Image(); image.Sour ...

  10. 完整版unity安卓发布流程(包括SDK有原生系统依赖关系的工程)

    要3个东西!NDS,SDK,JDK, NDK官网下载:https://developer.android.google.cn/ndk/downloads/index.html(注意系统是不是64位) ...