zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    用C语言编写生成小学四则运算程序
    每周学习报告
    读现代软件工程有感和自我介绍
    第七天
    第五天
    第六天
    作业九:课程总结
    作业四:结对编程项目--四则运算
    psp记录个人项目花费时间
    作业三:代码规范,代码复查
  • 原文地址:https://www.cnblogs.com/bookobe/p/11298115.html
Copyright © 2011-2022 走看看