• js实现复制到剪切板


    搜罗到两种兼容性还不错的方式。

    1、第一种,通过clipboard.js插件实现(推荐

    此插件封装了很多种使用方式很方便,具体demo,可以去GitHub上看,clipboard传送门

    2、第二种,纯js实现:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CopyDemo</title>
    </head>
    <body>
        <div id=NewsToolBox></div>
        <div id="text-content">      
            <p>测试p1</p>      
            <p>测试p2</p>  
        </div>
        <button id="copy-text-btn">复制</button>
    </body>
    </html>
    <script type="text/javascript">
        // 复制全文
        document.getElementById("copy-text-btn").onclick=function(){
            var ssrsss =document.getElementById("text-content").innerText.replace(/ +/g, ""); //获取文本并去掉空格
                var flag = copyText(ssrsss); //传递文本
                alert(flag ? '复制成功' : '复制失败')
            };
    
            function copyText(text) {
                var textarea = document.createElement("textarea"); //创建input对象
                var currentFocus = document.activeElement; //当前获得焦点的元素
                var toolBoxwrap = document.getElementById('NewsToolBox'); //将文本框插入到NewsToolBox这个之后
                toolBoxwrap.appendChild(textarea); //添加元素
                textarea.value = text;
                textarea.focus();
                if (textarea.setSelectionRange) {
                    textarea.setSelectionRange(0, textarea.value.length); //获取光标起始位置到结束位置
                } else {
                    textarea.select();
                }
                try {
                    var flag = document.execCommand("copy"); //执行复制
                } catch (eo) {
                    var flag = false;
                }
                toolBoxwrap.removeChild(textarea); //删除元素
                currentFocus.focus();
                return flag;
            }
        </script>

    上面两种方式兼容性都不错,亲测可用。

  • 相关阅读:
    从尾到头打印链表
    在链表结尾插入一个结点 以及在 在链表中找到第一个含有某值的结点并删除该结点
    替换空格
    二维数组中的查找
    简单选择排序
    冒泡排序
    Hash表的实现
    二叉排序树
    ajax返回后台编译时都对,返回error
    sql删除重复的记录保留一条
  • 原文地址:https://www.cnblogs.com/bookobe/p/11298115.html
Copyright © 2020-2023  润新知