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>
  • 相关阅读:
    解决VUE刷新或者加载出现闪烁
    解决VUE<router-link>不能触发点击事件
    H5的本地存储web Storage
    格式化数字格式
    移动终端浏览器版本信息
    新的开始
    PHP用PHPExcel导入Excel表格的数据到MySQL(thinkPHP3.2.3)
    Layui的分页模块在网站中的应用
    PHPstorm连接ftp
    自定义PHPstorm快捷键
  • 原文地址:https://www.cnblogs.com/ygunoil/p/12813378.html
Copyright © 2011-2022 走看看