clipboard.min.js實現複製文字功能

阿新 • • 發佈：2018-12-10

clipboard.min.js實現複製文字功能

參考資料

https://www.jianshu.com/p/3f8867de041e
https://blog.csdn.net/hry2015/article/details/70941912
https://zhidao.baidu.com/question/361073485656215612.html

clipboard.min.js下載

https://github.com/zenorocha/clipboard.js/archive/master.zip

html部分

<!-- 報文模態框 -->
<div class="modal fade popup" id="message" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="width:1000px;">
            <div class="modal-content">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        報文明細
                        <span class="pull-right">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        </span>
                    </div>
                    <div class="panel-body">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active"><a href="#second" data-toggle="tab">請求報文</a></li>
                            <li><a href="#third" data-toggle="tab">響應報文</a></li>
                            <li>
                                <a href="#first" data-toggle="tab" id="transferMsg">
                                    三方報文
                                </a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <button type="button" id="copyMe" class="copyMe btn btn-success">
                                <span class="glyphicon glyphicon-copy" aria-hidden="true"></span>複製
                            </button>
                            <div class="tab-pane fade in active high-night-show" id="second">
                                <pre class="reqParam" style="overflow-y: auto; max-height:600px;min-height: 400px;"></pre>
                            </div>
                            <div class="tab-pane fade high-night-show" id="third">
                                <pre class="resResult" style="overflow-y: auto; max-height:600px;min-height: 400px;"></pre>
                            </div>
                            <div class="tab-pane fade high-night-show" id="first">
                                <pre class="contentInfo" style="overflow-y: auto; max-height:600px;min-height: 400px;"></pre>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-success" data-dismiss="modal" > &nbsp;關&nbsp;&nbsp;&nbsp;&nbsp;閉 &nbsp;</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

javascript部分

<script type="text/javascript">
	var clipboard = new ClipboardJS(".copyMe",{
        text : function(){
            //尋找被啟用的那個div pre元素,同時獲取它下面的內容
            return $("div#myTabContent div.active pre").text();
        }
    });

    clipboard.on('success',function(e){
        alert("已複製到貼上板！");
        console.log(e);
    });

    clipboard.on('error',function(e){
        console.log(e);
    });
</script>

head部分(引入js檔案)

<head>
	<script src="../clipboard.min.js"></script>
</head>

clipboard.min.js原始碼

/*!
 * clipboard.js v2.0.0
 * https://zenorocha.github.io/clipboard.js
 * 
 * Licensed MIT © Zeno Rocha
 */
!function (t, e) {
    "object" == typeof exports && "object" == typeof module ? module.exports = e() : "function" == typeof define && define.amd ? define([], e) : "object" == typeof exports ? exports.ClipboardJS = e() : t.ClipboardJS = e()
}(this, function () {
    return function (t) {
        function e(o) {
            if (n[o]) return n[o].exports;
            var r = n[o] = {i: o, l: !1, exports: {}};
            return t[o].call(r.exports, r, r.exports, e), r.l = !0, r.exports
        }

        var n = {};
        return e.m = t, e.c = n, e.i = function (t) {
            return t
        }, e.d = function (t, n, o) {
            e.o(t, n) || Object.defineProperty(t, n, {configurable: !1, enumerable: !0, get: o})
        }, e.n = function (t) {
            var n = t && t.__esModule ? function () {
                return t.default
            } : function () {
                return t
            };
            return e.d(n, "a", n), n
        }, e.o = function (t, e) {
            return Object.prototype.hasOwnProperty.call(t, e)
        }, e.p = "", e(e.s = 3)
    }([function (t, e, n) {
        var o, r, i;
        !function (a, c) {
            r = [t, n(7)], o = c, void 0 !== (i = "function" == typeof o ? o.apply(e, r) : o) && (t.exports = i)
        }(0, function (t, e) {
            "use strict";

            function n(t, e) {
                if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
            }

            var o = function (t) {
                return t && t.__esModule ? t : {default: t}
            }(e), r = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
                return typeof t
            } : function (t) {
                return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
            }, i = function () {
                function t(t, e) {
                    for (var n = 0; n < e.length; n++) {
                        var o = e[n];
                        o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(t, o.key, o)
                    }
                }

                return function (e, n, o) {
                    return n && t(e.prototype, n), o && t(e, o), e
                }
            }(), a = function () {
                function t(e) {
                    n(this, t), this.resolveOptions(e), this.initSelection()
                }

                return i(t, [{
                    key: "resolveOptions", value: function () {
                        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
                        this.action = t.action, this.container = t.container, this.emitter = t.emitter, this.target = t.target, this.text = t.text, this.trigger = t.trigger, this.selectedText = ""
                    }
                }, {
                    key: "initSelection", value: function () {
                        this.text ? this.selectFake() : this.target && this.selectTarget()
                    }
                }, {
                    key: "selectFake", value: function () {
                        var t = this, e = "rtl" == document.documentElement.getAttribute("dir");
                        this.removeFake(), this.fakeHandlerCallback = function () {
                            return t.removeFake()
                        }, this.fakeHandler = this.container.addEventListener("click", this.fakeHandlerCallback) || !0, this.fakeElem = document.createElement("textarea"), this.fakeElem.style.fontSize = "12pt", this.fakeElem.style.border = "0", this.fakeElem.style.padding = "0", this.fakeElem.style.margin = "0", this.fakeElem.style.position = "absolute", this.fakeElem.style[e ? "right" : "left"] = "-9999px";
                        var n = window.pageYOffset || document.documentElement.scrollTop;
                        this.fakeElem.style.top = n + "px", this.fakeElem.setAttribute("readonly", ""), this.fakeElem.value = this.text, this.container.appendChild(this.fakeElem), this.selectedText = (0, o.default)(this.fakeElem), this.copyText()
                    }
                }, {
                    key: "removeFake", value: function () {
                        this.fakeHandler && (this.container.removeEventListener("click", this.fakeHandlerCallback), this.fakeHandler = null, this.fakeHandlerCallback = null), this.fakeElem && (this.container.removeChild(this.fakeElem), this.fakeElem = null)
                    }
                }, {
                    key: "selectTarget", value: function () {
                        this.selectedText = (0, o.default)(this.target), this.copyText()
                    }
                }, {
                    key: "copyText", value: function () {
                        var t = void 0;
                        try {
                            t = document.execCommand(this.action)
                        } catch (e) {
                            t = !1
                        }
                        this.handleResult(t)
                    }
                }, {
                    key: "handleResult", value: function (t) {
                        this.emitter.emit(t ? "success" : "error", {
                            action: this.action,
                            text: this.selectedText,
                            trigger: this.trigger,
                            clearSelection: this.clearSelection.bind(this)
                        })
                    }
                }, {
                    key: "clearSelection", value: function () {
                        this.trigger && this.trigger.focus(), window.getSelection().removeAllRanges()
                    }
                }, {
                    key: "destroy", value: function () {
                        this.removeFake()
                    }
                }, {
                    key: "action", set: function () {
                        var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "copy";
                        if (this._action = t, "copy" !== this._action && "cut" !== this._action) throw new Error('Invalid "action" value, use either "copy" or "cut"')
                    }, get: function () {
                        return this._action
                    }
                }, {
                    key: "target", set: function (t) {
                        if (void 0 !== t) {
                            if (!t || "object" !== (void 0 === t ? "undefined" : r(t)) || 1 !== t.nodeType) throw new Error('Invalid "target" value, use a valid Element');
                            if ("copy" === this.action && t.hasAttribute("disabled")) throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
                            if ("cut" === this.action && (t.hasAttribute("readonly") || t.hasAttribute("disabled"))) throw new Error('Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes');
                            this._target = t
                        }
                    }, get: function () {
                        return this._target
                    }
                }]), t
            }();
            t.exports = a
        })
    }, function (t, e, n) {
        function o(t, e, n) {
            if (!t && !e && !n) throw new Error("Missing required arguments");
            if (!c.string(e)) throw new TypeError("Second argument must be a String");
            if (!c.fn(n)) throw new TypeError("Third argument must be a Function");
            if (c.node(t)) return r(t, e, n);
            if (c.nodeList(t)) return i(t, e, n);
            if (c.string(t)) return a(t, e, n);
            throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")
        }

        function r(t, e, n) {
            return t.addEventListener(e, n), {
                destroy: function () {
                    t.removeEventListener(e, n)
                }
            }
        }

        function i(t, e, n) {
            return Array.prototype.forEach.call(t, function (t) {
                t.addEventListener(e, n)
            }), {
                destroy: function () {
                    Array.prototype.forEach.call(t, function (t) {
                        t.removeEventListener(e, n)
                    })
                }
            }
        }

        function a(t, e, n) {
            return u(document.body, t, e, n)
        }

        var c = n(6), u = n(5);
        t.exports = o
    }, function (t, e) {
        function n() {
        }

        n.prototype = {
            on: function (t, e, n) {
                var o = this.e || (this.e = {});
                return (o[t] || (o[t] = [])).push({fn: e, ctx: n}), this
            }, once: function (t, e, n) {
                function o() {
                    r.off(t, o), e.apply(n, arguments)
                }

                var r = this;
                return o._ = e, this.on(t, o, n)
            }, emit: function (t) {
                var e = [].slice.call(arguments, 1), n = ((this.e || (this.e = {}))[t] || []).slice(), o = 0,
                    r = n.length;
                for (o; o < r; o++) n[o].fn.apply(n[o].ctx, e);
                return this
            }, off: function (t, e) {
                var n = this.e || (this.e = {}), o = n[t], r = [];
                if (o && e) for (var i = 0, a = o.length; i < a; i++) o[i].fn !== e && o[i].fn._ !== e && r.push(o[i]);
                return r.length ? n[t] = r : delete n[t], this
            }
        }, t.exports = n
    }, function (t, e, n) {
        var o, r, i;
        !function (a, c) {
            r = [t, n(0), n(2), n(1)], o = c, void 0 !== (i = "function" == typeof o ? o.apply(e, r) : o) && (t.exports = i)
        }(0, function (t, e, n, o) {
            "use strict";

            function r(t) {
                return t && t.__esModule ? t : {default: t}
            }

            function i(t, e) {
                if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function")
            }

            function a(t, e) {
                if (!t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
                return !e || "object" != typeof e && "function" != typeof e ? t : e
            }

            function c(t, e) {
                if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function, not " + typeof e);
                t.prototype = Object.create(e && e.prototype, {
                    constructor: {
                        value: t,
                        enumerable: !1,
                        writable: !0,
                        configurable: !0
                    }
                }), e && (Object.setPrototypeOf ? Object.setPrototypeOf(t, e) : t.__proto__ = e)
            }

            function u(t, e) {
                var n = "data-clipboard-" + t;
                if (e.hasAttribute(n)) return e.getAttribute(n)
            }

            var l = r(e), s = r(n), f = r(o),
                d = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (t) {
                    return typeof t
                } : function (t) {
                    return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : typeof t
                }, h = function () {
                    function t(t, e) {
                        for (var n = 0; n < e.length; n++) {
                            var o = e[n];
                            o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(t, o.key, o)
                        }
                    }

                    return function (e, n, o) {
                        return n && t(e.prototype, n), o && t(e, o), e
                    }
                }(), p = function (t) {
                    function e(t, n) {
                        i(this, e);
                        var o = a(this, (e.__proto__ || Object.getPrototypeOf(e)).call(this));
                        return o.resolveOptions(n), o.listenClick(t), o
                    }

                    return c(e, t), h(e, [{
                        key: "resolveOptions", value: function () {
                            var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
                            this.action = "function" == typeof t.action ? t.action : this.defaultAction, this.target = "function" == typeof t.target ? t.target : this.defaultTarget, this.text = "function" == typeof t.text ? t.text : this.defaultText, this.container = "object" === d(t.container) ? t.container : document.body
                        }
                    }, {
                        key: "listenClick", value: function (t) {
                            var e = this;
                            this.listener = (0, f.default)(t, "click", function (t) {
                                return e.onClick(t)
                            })
                        }
                    }, {
                        key: "onClick", value: function (t) {
                            var e = t.delegateTarget || t.currentTarget;
                            this.clipboardAction && (this.clipboardAction = null), this.clipboardAction = new l.default({
                                action: this.action(e),
                                target: this.target(e),
                                text: this.text(e),
                                container: this.container,
                                trigger: e,
                                emitter: this
                            })
                        }
                    }, {
                        key: "defaultAction", value: function (t) {
                            return u("action", t)
                        }
                    }, {
                        key: "defaultTarget", value: function (t) {
                            var e = u("target", t);
                            if (e) return document.querySelector(e)
                        }
                    }, {
                        key: "defaultText", value: function (t) {
                            return u("text", t)
                        }
                    }, {
                        key: "destroy", value: function () {
                            this.listener.destroy(), this.clipboardAction && (this.clipboardAction.destroy(), this.clipboardAction = null)
                        }
                    }], [{
                        key: "isSupported", value: function () {
                            var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : ["copy", "cut"],
                                e = "string" == typeof t ? [t] : t, n = !!document.queryCommandSupported;
                            return e.forEach(function (t) {
                                n = n && !!document.queryCommandSupported(t)
                            }), n
                        }
                    }]), e
                }(s.default);
            t.exports = p
        })
    }, function (t, e) {
        function n(t, e) {
            for (; t && t.nodeType !== o;) {
                if ("function" == typeof t.matches && t.matches(e)) return t;
                t = t.parentNode
            }
        }

        var o = 9;
        if ("undefined" != typeof Element && !Element.prototype.matches) {
            var r = Element.prototype;
            r.matches = r.matchesSelector || r.mozMatchesSelector || r.msMatchesSelector || r.oMatchesSelector || r.webkitMatchesSelector
        }
        t.exports = n
    }, function (t, e, n) {
        function o(t, e, n, o, r) {
            var a = i.apply(this, arguments);
            return t.addEventListener(n, a, r), {
                destroy: function () {
                    t.removeEventListener(n, a, r)
                }
            }
        }

        function r(t, e, n, r, i) {
            return "function" == typeof t.addEventListener ? o.apply(null, arguments) : "function" == typeof n ? o.bind(null, document).apply(null, arguments) : ("string" == typeof t && (t = document.querySelectorAll(t)), Array.prototype.map.call(t, function (t) {
                return o(t, e, n, r, i)
            }))
        }

        function i(t, e, n, o) {
            return function (n) {
                n.delegateTarget = a(n.target, e), n.delegateTarget && o.call(t, n)
            }
        }

        var a = n(4);
        t.exports = r
    }, function (t, e) {
        e.node = function (t) {
            return void 0 !== t && t instanceof HTMLElement && 1 === t.nodeType
        }, e.nodeList = function (t) {
            var n = Object.prototype.toString.call(t);
            return void 0 !== t && ("[object NodeList]" === n || "[object HTMLCollection]" === n) && "length" in t && (0 === t.length || e.node(t[0]))
        }, e.string = function (t) {
            return "string" == typeof t || t instanceof String
        }, e.fn = function (t) {
            return "[object Function]" === Object.prototype.toString.call(t)
        }
    }, function (t, e) {
        function n(t) {
            var e;
            if ("SELECT" === t.nodeName) t.focus(), e = t.value; else if ("INPUT" === t.nodeName || "TEXTAREA" === t.nodeName) {
                var n = t.hasAttribute("readonly");
                n || t.setAttribute("readonly", ""), t.select(), t.setSelectionRange(0, t.value.length), n || t.removeAttribute("readonly"), e = t.value
            } else {
                t.hasAttribute("contenteditable") && t.focus();
                var o = window.getSelection(), r = document.createRange();
                r.selectNodeContents(t), o.removeAllRanges(), o.addRange(r), e = o.toString()
            }
            return e
        }

        t.exports = n
    }])
});

學習Java的同學注意了！！！
學習過程中遇到什麼問題或者想獲取學習資源的話，歡迎加入Java學習交流群，群號碼：543120397 我們一起學Java！

clipboard.min.js實現複製文字功能

clipboard.min.js實現複製文字功能參考資料 https://www.jianshu.com/p/3f8867de041e https://blog.csdn.net/hry2015/article/details/70941912 https://zhidao.bai

js實現複製貼上功能

在專案中使用到複製貼上功能，雖然網上有很多大牛封裝了很多的外掛，但是還是想不去使用外掛，就像自己來實現這個功能。初步想法： 1. 獲取到需要複製的內容，這裡我可以將需要複製的內容放在input或者textarea的value中，然後使用input的select()方法來獲取到值； 2. 獲取到值了，那我

JS實現複製文字到電腦剪下板中

程式碼實現（吐槽：百度上各種方法，就是不好使。或者就是引用第三方外掛，去stackoverflow，一下就解決，所以啊，多用谷歌）已測試谷歌和IE（8） function copyStringToC

一段js實現複製文字內容到剪下板（該方法相容所有瀏覽器~）

function copyUrl2() { var Url2=document.getElementById("biao1").innerText; var oInput = document.createElement('input'); oInpu

通過如何通過js實現複製貼上功能

在ie中window.clipboardData（剪下板物件）是可以被獲取，所以利用這個方法我們可以實現在IE當中複製貼上的功能，demo如下！ <html> <head> <meta http-equiv="Content-Type" content="text/h

clipboard.js實現複製功能的示例程式碼

<div class="coupon-text-wrap"> <span class="coupon-text" id="coupon-text" > 123456 </span> <span class="coupon

使用clipboard.js實現複製功能

最近在開發中，使用原生js複製時，發現在360 7.1的低版本中無法實現程式碼的複製，隨後便網上找了外掛實現複製功能，檢驗後，發現在低版本也支援demo：<input id="contents" type="text" value="" style="position:

使用clipboard.js實現複製功能的示例程式碼

<td>電話號碼</td> <td> <span class="screenTel" id="callNumber"></span>  <span class="tel

clipboard.js實現複製功能

第一次在csdn上寫技術部落格，昨天剛修好家裡的電腦，閒來無事，試試這個配置極低的老機器是否能進行簡單的程式設計，閒話少敘，直入正題。先上程式碼，js程式碼如下：var clipboard = new Clipboard('p', { target: fun

原生Js實現複製功能的方法總結，execCommand和clipboardData的使用

原生Js實現複製(Copy)的兩種方法，一種是利用 clipboardData，另外一種則是用 execCommand()，今天將統一講解一下關於他們的使用方法。 document.execCommand 當一個HTML文件切換到設計模式(designMode)時，文件物件

clipboard-複製文字功能

做了一個功能，顯示32位的流水號，目測顯示在table上有一點點長，所以就做的過濾，只顯示3位加省略號，滑鼠移入的時候顯示完全。這個時候老大位就有一個問題了，複製的時候不方便，所以加了一個點選‘流水號’複製的功能（一）結合vue用的（非腳手架）  &l

【Vue】使用clipboard實現複製文字到剪貼簿

需求如下：假設有這樣的列表，我們希望能夠點選複製通知連結按鈕，將表格中通知連結列的內容複製到剪貼簿，畢竟通知連結的內容比較多，能夠複製的話，該列就可以不用展示出來。 1、安裝clipboard npm install clipboard --save 檢視是否安裝成

clipboard.js實現複製黏貼到剪貼簿

在開發過程中難免會遇到點選分享的需求，這裡有兩種實現方式：第一種：通過原生js 的方法用（存在相容性）： document.execCommand( aCommandName, aShowDefaultUI, aValueArgument**)** 引數說明：&nbs

jquery wysiwyg.js實現富文字編輯框，可複製圖片及文字

wysiwyg.js是一款十分強大的、所見即所得的jQuery富文字編輯器外掛。wysiwyg.js富文字編輯器體積小，支援選擇、鍵盤、佔位等眾多事件。而且該富文字編輯器的相容性十分好，甚至相容IE

js實現複製到剪貼簿功能，相容所有瀏覽器

前段時間做專案的時候，有點選按鈕複製文字的需求，想使用操作windows剪下板實現，在網上查了些資料，發現目前好像只有IE支援直接訪問剪下板，實現需求的時候也只做了IE中的點選複製功能，其餘瀏覽器： if(window.clipboardData){ window.clip

ZeroClipboard實現跨瀏覽器點選複製文字功能

後臺開發過程中常常要實現點選複製文字的功能，但很多瀏覽器出於安全考慮不支援js複製文字，使用開源庫ZeroClipboard可以很好地解決該問題。在頁面上引入ZeroClipboard並配置好ZeroClipboard.swf的路徑。（ZeroClipboard使用fl

JS實現複製功能，相容各大主流瀏覽器複製神器 ZeroClipboard

以下是完整版程式碼： <!DOCTYPE html> <html> <head> <title>Zero Clipboard 測試</title> <meta charset="utf-8"> <

純js實現複製到剪貼簿功能

在網頁上覆制文字到剪下板，一般是使用JS+Flash結合的方法，網上有很多相關文章介紹。隨著 HTML5 技術的發展，Flash 已經在很多場合不適用了，甚至被遮蔽。本文介紹的一款JS外掛，實現了純JS方法複製文字到剪下板。外掛名是Clipboard.js，該外掛不依

js 和 ClipboardJS實現複製文字，相容移動端

clipboard.min.js實現複製文字功能

clipboard.min.js實現複製文字功能

參考資料

clipboard.min.js下載

html部分

javascript部分

head部分(引入js檔案)

clipboard.min.js原始碼

相關推薦