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),你可以做相应的交互提示等。
  • 相关阅读:
    HDU--2024
    HDU--2021
    HDU--2020
    HDU--2019
    HDU--2018
    HDU--2017
    HDU--2016
    python全栈开发day13-迭代器、生成器、列表推导式等
    python全栈开发day12-函数的有用信息、带参数的装饰器、多个装饰器装饰一个函数、global和nonlocal的进一步解析和总结
    Python3使用Print输出带颜色字体
  • 原文地址:https://www.cnblogs.com/wuxu-dl/p/12575499.html
Copyright © 2011-2022 走看看