zoukankan      html  css  js  c++  java
  • js实现复制粘贴

    项目中经常会遇到点击按钮复制订单号、订单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),你可以做相应的交互提示等。
  • 相关阅读:
    python中的itertools模块简单使用
    SQLServer链接服务器
    @Valid和@Validated的区分总结
    禅道完成高成资本独家领投的数千万元融资
    青岛敏捷之旅,来了!
    linux主机互信操作
    小白学标准库之 mux
    小白学标准库之 flag
    音频截取分割打点标注工具
    大数据可能面试题
  • 原文地址:https://www.cnblogs.com/wuxu-dl/p/12575499.html
Copyright © 2011-2022 走看看