项目中经常会遇到点击按钮复制订单号、订单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. python中常见的错误

    python中常见的错误   1.IndentationError: unindent does not match any outer indentation leve 众所周知,Python语法要 ...

  2. 跟我一起做一个vue的小项目(八)

    接下来我们进行的是城市选择页面的路由配置 添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router f ...

  3. ES6--反引号的使用

    /*动态初始退出登出框话模态框*/ /*动态的初始化退出登陆模态框 反引号ES6语法 * 为什么在使用字符串格式直接创建模态框 * 1.不能在html页面中创建模板,因为如果换一个页面就没有对应的模板 ...

  4. 前端(jQuery)(5)-- jQuery AJAX异步访问和加载片段

    异步访问 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  5. 使用 WPF 生成图形

    下载代码示例 基于一组与测试有关的数据来生成图形是一项常见的软件开发任务.根据我的经验,最常用的方法是将数据导入 Excel 电子表格,然后使用 Excel 内置的绘图功能手动生成图形.这种做法适用于 ...

  6. shell总结:读取文件、参数、if、分割字符串、数组长度、空文件、变量赋值、多进程、按行切割文件、查看线程

    Reference: http://saiyaren.iteye.com/blog/1943207 1.     Shell  读取文件和写文件 for line in $(<top30000. ...

  7. Xshell 、PuTTY 复制文件到Linux

    一.使用Xshell 在linux下下载一个需要安装一个工具lrzsz包: [root@localhost home] # yum install -y lrzsz 从windows上传文件到linu ...

  8. Codeforces 608E. Marbles

    E. Marbles time limit per test 2 seconds memory limit per test 256 megabytes input standard input ou ...

  9. Leetcode628.Maximum Product of Three Numbers三个数的最大乘积

    给定一个整型数组,在数组中找出由三个数组成的最大乘积,并输出这个乘积. 示例 1: 输入: [1,2,3] 输出: 6 示例 2: 输入: [1,2,3,4] 输出: 24 注意: 给定的整型数组长度 ...

  10. 2019阿里云开年Hi购季基础云产品分会场全攻略!

    2019阿里云云上Hi购季活动已经于2月25日正式开启,从已开放的活动页面来看,活动分为三个阶段: 2月25日-3月04日的活动报名阶段.3月04日-3月16日的新购满返+5折抢购阶段.3月16日-3 ...