项目中经常会遇到点击按钮复制订单号、订单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),你可以做相应的交互提示等。

最新文章

  1. 微信公众平台C# SDK:Senparc.Weixin.MP.dll
  2. html 补充
  3. asmca无法创建ASM磁盘
  4. 浅谈MIPS地址对齐问题
  5. YUI的类型判断函数
  6. (转)C#DataTable学习心得
  7. linux下修改.bash_profile立即生效的三种方法
  8. MYSQLI - mysqli
  9. [妙味Ajax]第三课:AJAX跨域解决方案:JSONP
  10. apicloud上传图片
  11. 浅议极大似然估计(MLE)背后的思想原理
  12. Linux服务器限制ssh登录,查看登录日志
  13. 练习:javascript-setInterval动画运动平移,定时器动画练习
  14. week06 09 NodeJS Server as a RPCclient - jayson
  15. (转)浅谈AIX下IPFilter防火墙
  16. CentOS 6.3下搭建Web服务器
  17. PHP 接收筛选项包含0的select下拉菜单的处理
  18. 静态分析第三发 so文件分析(小黄人快跑)
  19. 用gcc编译成可执行程序 (转)
  20. javascript+php实现根据用户时区显示当地时间的方法

热门文章

  1. php小程序-文章发布系统
  2. 使用C#实现数据结构堆
  3. 【noi 2.6_2989】糖果(DP)
  4. Codeforces Round #646 (Div. 2) B. Subsequence Hate (思维,前缀和)
  5. 后缀数组Da模板+注释 以及 dc3模板
  6. jmespath(2)投影Projections
  7. js中for循环遍历的写法
  8. Nginx基础 - 配置缓存web服务
  9. Linux-文件查看命令
  10. Leetcode(29)-两数相除