【javaScript】JS实现点击按钮复制input/textarea标签中的值到剪贴板，剪切，撤销，恢复的方法同理

本文链接：https://blog.youkuaiyun.com/Umbrella_Um/article/details/98473926

JS实现点击按钮复制，剪切，撤销，恢复 input/textarea 标签中的值

HTML代码：

<body>
<div>
    <textarea id="code-text" cols="30" rows="10" maxlength="2000">
    成功源于不懈的努力。
　　如果你想得到，你就会得到，你所需要付出的只是行动。
　　天行健，君子以自强不息。
　　奋斗的路上，泪须一个人擦，路须一个人走，你可以孤独，但不能弱小，这就是你为什么要变强的理由！
　　不吃苦，不奋斗，你要青春干什么？
　　在梦想中期望生活；在追求中感受生活；在成长中理解生活；在平淡中品位生活。
　　所有坚韧不拔的努力迟早会取得报酬的。
　　人生最重要的一课，是你要为你的人生负责。
　　年轻不为梦想买单，老了拿什么话说当年。
    </textarea>
    <div>
        <button id="btn-copy" onclick="copy.copyText()">复制</button>
        <button id="btn-cut" onclick="copy.cutText()">剪切</button>
        <button id="btn-redo" onclick="copy.recovery()">恢复</button>
        <button id="btn-undo" onclick="copy.revoke()">撤销</button>
    </div>
</div>
    <script src="demo.js"></script> 
</body>

JavaScript代码：

;(function(globle, factory, plug){
    return globle[plug] = factory.call(globle);
})(this, function(){
    var __T__ = {
        textarea: document.getElementById("code-text"),
        copyBtn: document.querySelector("#btn-copy"),
        copyed: "已复制",
        noCopy: "复制"
        
    }
    var __C__ =  {
        copyText: function(){
            __T__.textarea.select();
            document.execCommand("copy");
            this.getText(__T__.copyBtn, __T__.copyed);
        },
        cutText: function(){
            __T__.textarea.select();
            console.log("111");
            document.execCommand("cut");
            this.getText(__T__.copyBtn,__T__.noCopy);
        },
        recovery: function(){
            document.execCommand("redo");
        },
        revoke: function(){
            document.execCommand("undo");
            this.getText(__T__.copyBtn,__T__.noCopy);
        },
        getText: function(element, option){
            if(!element) throw new Error("Please pass in the formulation element!");
            var option = option || "";
            if(element.textContent){
                return element.textContent = option;  // 兼容低版本FF且适用于主流浏览器
            }else{
                return element.innerText = option;  // 兼容IE8以下及chrome1-
            }
        },
        
    }
    return __C__;
},"copy");

这里说一下几个注意点和知识点：

复制、剪切、恢复、撤销都是使用document.execCommand，如果需要使用其他有趣的方法可以参考MDN
这里可以兼容一下querySelector，这里不写了，可以看这张文章 querySelector的兼容问题
关于innerText和textContent的对比（这里优先使用textContent,并且配合innerText兼容IE8以下）
① textContent 会获取所有元素的内容，包括 <script> 和 <style> 元素，然而 innerText 不会
② innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会
③ 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会
④ 与 textContent 不同的是, 在 IE11 中对 innerText 进行修改，不仅会移除当前元素的子节点，而且还会永久性地破坏所有后代文本节点（所以不可能再次将节点再次插入到任何其他元素或同一元素中）
⑤ innerHTML 返回 HTML 文本，为了在元素中检索或写入文本，人们使用innerHTML。但是，textContent通常具有更好的性能，因为文本不会被解析为HTML。此外，使用textContent可以防止 XSS 攻击