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>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM