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#获取本地IP地址
    C#中将字符串转换成数值
    JavaScript实现基于对象的双端队列
    Java网络编程
    JavaScript实现基于对象的队列
    JavaScript实现基于对象的栈
    JavaScript实现基于数组的栈
    发送短信按钮倒计时案例
    JavaScript动态显示时间
    html
  • 原文地址:https://www.cnblogs.com/ygunoil/p/12813378.html
Copyright © 2011-2022 走看看