JS复制内容到剪贴板功能 可随意位置使用

网站因为要从mediawiki程序把内容手动搬到这里来(为了对内容进行手动排版),为了图个省事,所以决定加一个JS点击按钮后复制内容区里面的内容功能。虽然这是一个很简单的功能,但我却发现在网上找起来可用的确实不容易,在找寻很久后终于找到一个可用的。现在把所有代码记录在这里。

要实现这个功能,共包括JS部分和源码部份,现在共分两部分写在下面。

第一部分页面内部加入代码

<div class="btn">复制</div>
    <!-- 2. Include library -->

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn', {
        target: function() {
            return document.getElementById('cr');
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

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

在页面中任意位置加入以上代码即可。我们对两处说明一下。

复制按钮说明

<div class="btn">复制</div>

复制按钮原本是按钮样式,因为让我的页面失去美感,我改成了普通文字方式,用起来是一样的,如果想用按钮样式,请用下面的这段:

<button class="btn">复制</button>

能复制哪部分的内容

为了防止有超新手看到这个内容不会使用,所以在这里说明一下:

在你页面中要复制内容的html标签中加入 id="cr",就可以直接使用了。我们下面给出完整代码

<div id="cr">这儿的内容将被复制</div>


<button class="btn">复制</button>
    <script src="clipboard.min.js"></script>

    <script>
    var clipboard = new Clipboard('.btn', {
        target: function() {
            return document.getElementById('cr');
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

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

第二部分jS源码文件clipboard.min.js

我们的源码区有复制功能,你直接复制后存到本地JS后缀的文件中即可

/*!
 * clipboard.js v1.5.15
 * https://zenorocha.github.io/clipboard.js
 *
 * Licensed MIT © Zeno Rocha
 */
!
function(e) {
    if ("object" == typeof exports && "undefined" != typeof module) module.exports = e();
    else if ("function" == typeof define && define.amd) define([], e);
    else {
        var t;
        t = "undefined" != typeof window ? window: "undefined" != typeof global ? global: "undefined" != typeof self ? self: this,
        t.Clipboard = e()
    }
} (function() {
    var e, t, n;
    return function e(t, n, i) {
        function o(a, c) {
            if (!n[a]) {
                if (!t[a]) {
                    var l = "function" == typeof require && require;
                    if (!c && l) return l(a, !0);
                    if (r) return r(a, !0);
                    var s = new Error("Cannot find module '" + a + "'");
                    throw s.code = "MODULE_NOT_FOUND",
                    s
                }
                var u = n[a] = {
                    exports: {}
                };
                t[a][0].call(u.exports,
                function(e) {
                    var n = t[a][1][e];
                    return o(n ? n: e)
                },
                u, u.exports, e, t, n, i)
            }
            return n[a].exports
        }
        for (var r = "function" == typeof require && require,
        a = 0; a < i.length; a++) o(i[a]);
        return o
    } ({
        1 : [function(e, t, n) {
            function i(e, t) {
                for (; e && e !== document;) {
                    if (e.matches(t)) return e;
                    e = e.parentNode
                }
            }
            if (Element && !Element.prototype.matches) {
                var o = Element.prototype;
                o.matches = o.matchesSelector || o.mozMatchesSelector || o.msMatchesSelector || o.oMatchesSelector || o.webkitMatchesSelector
            }
            t.exports = i
        },
        {}],
        2 : [function(e, t, n) {
            function i(e, t, n, i, r) {
                var a = o.apply(this, arguments);
                return e.addEventListener(n, a, r),
                {
                    destroy: function() {
                        e.removeEventListener(n, a, r)
                    }
                }
            }
            function o(e, t, n, i) {
                return function(n) {
                    n.delegateTarget = r(n.target, t),
                    n.delegateTarget && i.call(e, n)
                }
            }
            var r = e("./closest");
            t.exports = i
        },
        {
            "./closest": 1
        }],
        3 : [function(e, t, n) {
            n.node = function(e) {
                return void 0 !== e && e instanceof HTMLElement && 1 === e.nodeType
            },
            n.nodeList = function(e) {
                var t = Object.prototype.toString.call(e);
                return void 0 !== e && ("[object NodeList]" === t || "[object HTMLCollection]" === t) && "length" in e && (0 === e.length || n.node(e[0]))
            },
            n.string = function(e) {
                return "string" == typeof e || e instanceof String
            },
            n.fn = function(e) {
                var t = Object.prototype.toString.call(e);
                return "[object Function]" === t
            }
        },
        {}],
        4 : [function(e, t, n) {
            function i(e, t, n) {
                if (!e && !t && !n) throw new Error("Missing required arguments");
                if (!c.string(t)) 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(e)) return o(e, t, n);
                if (c.nodeList(e)) return r(e, t, n);
                if (c.string(e)) return a(e, t, n);
                throw new TypeError("First argument must be a String, HTMLElement, HTMLCollection, or NodeList")
            }
            function o(e, t, n) {
                return e.addEventListener(t, n),
                {
                    destroy: function() {
                        e.removeEventListener(t, n)
                    }
                }
            }
            function r(e, t, n) {
                return Array.prototype.forEach.call(e,
                function(e) {
                    e.addEventListener(t, n)
                }),
                {
                    destroy: function() {
                        Array.prototype.forEach.call(e,
                        function(e) {
                            e.removeEventListener(t, n)
                        })
                    }
                }
            }
            function a(e, t, n) {
                return l(document.body, e, t, n)
            }
            var c = e("./is"),
            l = e("delegate");
            t.exports = i
        },
        {
            "./is": 3,
            delegate: 2
        }],
        5 : [function(e, t, n) {
            function i(e) {
                var t;
                if ("SELECT" === e.nodeName) e.focus(),
                t = e.value;
                else if ("INPUT" === e.nodeName || "TEXTAREA" === e.nodeName) e.focus(),
                e.setSelectionRange(0, e.value.length),
                t = e.value;
                else {
                    e.hasAttribute("contenteditable") && e.focus();
                    var n = window.getSelection(),
                    i = document.createRange();
                    i.selectNodeContents(e),
                    n.removeAllRanges(),
                    n.addRange(i),
                    t = n.toString()
                }
                return t
            }
            t.exports = i
        },
        {}],
        6 : [function(e, t, n) {
            function i() {}
            i.prototype = {
                on: function(e, t, n) {
                    var i = this.e || (this.e = {});
                    return (i[e] || (i[e] = [])).push({
                        fn: t,
                        ctx: n
                    }),
                    this
                },
                once: function(e, t, n) {
                    function i() {
                        o.off(e, i),
                        t.apply(n, arguments)
                    }
                    var o = this;
                    return i._ = t,
                    this.on(e, i, n)
                },
                emit: function(e) {
                    var t = [].slice.call(arguments, 1),
                    n = ((this.e || (this.e = {}))[e] || []).slice(),
                    i = 0,
                    o = n.length;
                    for (i; i < o; i++) n[i].fn.apply(n[i].ctx, t);
                    return this
                },
                off: function(e, t) {
                    var n = this.e || (this.e = {}),
                    i = n[e],
                    o = [];
                    if (i && t) for (var r = 0,
                    a = i.length; r < a; r++) i[r].fn !== t && i[r].fn._ !== t && o.push(i[r]);
                    return o.length ? n[e] = o: delete n[e],
                    this
                }
            },
            t.exports = i
        },
        {}],
        7 : [function(t, n, i) { !
            function(o, r) {
                if ("function" == typeof e && e.amd) e(["module", "select"], r);
                else if ("undefined" != typeof i) r(n, t("select"));
                else {
                    var a = {
                        exports: {}
                    };
                    r(a, o.select),
                    o.clipboardAction = a.exports
                }
            } (this,
            function(e, t) {
                "use strict";
                function n(e) {
                    return e && e.__esModule ? e: {
                    default:
                        e
                    }
                }
                function i(e, t) {
                    if (! (e instanceof t)) throw new TypeError("Cannot call a class as a function")
                }
                var o = n(t),
                r = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ?
                function(e) {
                    return typeof e
                }: function(e) {
                    return e && "function" == typeof Symbol && e.constructor === Symbol && e !== Symbol.prototype ? "symbol": typeof e
                },
                a = function() {
                    function e(e, t) {
                        for (var n = 0; n < t.length; n++) {
                            var i = t[n];
                            i.enumerable = i.enumerable || !1,
                            i.configurable = !0,
                            "value" in i && (i.writable = !0),
                            Object.defineProperty(e, i.key, i)
                        }
                    }
                    return function(t, n, i) {
                        return n && e(t.prototype, n),
                        i && e(t, i),
                        t
                    }
                } (),
                c = function() {
                    function e(t) {
                        i(this, e),
                        this.resolveOptions(t),
                        this.initSelection()
                    }
                    return a(e, [{
                        key: "resolveOptions",
                        value: function e() {
                            var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
                            this.action = t.action,
                            this.emitter = t.emitter,
                            this.target = t.target,
                            this.text = t.text,
                            this.trigger = t.trigger,
                            this.selectedText = ""
                        }
                    },
                    {
                        key: "initSelection",
                        value: function e() {
                            this.text ? this.selectFake() : this.target && this.selectTarget()
                        }
                    },
                    {
                        key: "selectFake",
                        value: function e() {
                            var t = this,
                            n = "rtl" == document.documentElement.getAttribute("dir");
                            this.removeFake(),
                            this.fakeHandlerCallback = function() {
                                return t.removeFake()
                            },
                            this.fakeHandler = document.body.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[n ? "right": "left"] = "-9999px";
                            var i = window.pageYOffset || document.documentElement.scrollTop;
                            this.fakeElem.addEventListener("focus", window.scrollTo(0, i)),
                            this.fakeElem.style.top = i + "px",
                            this.fakeElem.setAttribute("readonly", ""),
                            this.fakeElem.value = this.text,
                            document.body.appendChild(this.fakeElem),
                            this.selectedText = (0, o.
                        default)(this.fakeElem),
                            this.copyText()
                        }
                    },
                    {
                        key: "removeFake",
                        value: function e() {
                            this.fakeHandler && (document.body.removeEventListener("click", this.fakeHandlerCallback), this.fakeHandler = null, this.fakeHandlerCallback = null),
                            this.fakeElem && (document.body.removeChild(this.fakeElem), this.fakeElem = null)
                        }
                    },
                    {
                        key: "selectTarget",
                        value: function e() {
                            this.selectedText = (0, o.
                        default)(this.target),
                            this.copyText()
                        }
                    },
                    {
                        key: "copyText",
                        value: function e() {
                            var t = void 0;
                            try {
                                t = document.execCommand(this.action)
                            } catch(e) {
                                t = !1
                            }
                            this.handleResult(t)
                        }
                    },
                    {
                        key: "handleResult",
                        value: function e(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 e() {
                            this.target && this.target.blur(),
                            window.getSelection().removeAllRanges()
                        }
                    },
                    {
                        key: "destroy",
                        value: function e() {
                            this.removeFake()
                        }
                    },
                    {
                        key: "action",
                        set: function e() {
                            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 e() {
                            return this._action
                        }
                    },
                    {
                        key: "target",
                        set: function e(t) {
                            if (void 0 !== t) {
                                if (!t || "object" !== ("undefined" == typeof 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 e() {
                            return this._target
                        }
                    }]),
                    e
                } ();
                e.exports = c
            })
        },
        {
            select: 5
        }],
        8 : [function(t, n, i) { !
            function(o, r) {
                if ("function" == typeof e && e.amd) e(["module", "./clipboard-action", "tiny-emitter", "good-listener"], r);
                else if ("undefined" != typeof i) r(n, t("./clipboard-action"), t("tiny-emitter"), t("good-listener"));
                else {
                    var a = {
                        exports: {}
                    };
                    r(a, o.clipboardAction, o.tinyEmitter, o.goodListener),
                    o.clipboard = a.exports
                }
            } (this,
            function(e, t, n, i) {
                "use strict";
                function o(e) {
                    return e && e.__esModule ? e: {
                    default:
                        e
                    }
                }
                function r(e, t) {
                    if (! (e instanceof t)) throw new TypeError("Cannot call a class as a function")
                }
                function a(e, t) {
                    if (!e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
                    return ! t || "object" != typeof t && "function" != typeof t ? e: t
                }
                function c(e, t) {
                    if ("function" != typeof t && null !== t) throw new TypeError("Super expression must either be null or a function, not " + typeof t);
                    e.prototype = Object.create(t && t.prototype, {
                        constructor: {
                            value: e,
                            enumerable: !1,
                            writable: !0,
                            configurable: !0
                        }
                    }),
                    t && (Object.setPrototypeOf ? Object.setPrototypeOf(e, t) : e.__proto__ = t)
                }
                function l(e, t) {
                    var n = "data-clipboard-" + e;
                    if (t.hasAttribute(n)) return t.getAttribute(n)
                }
                var s = o(t),
                u = o(n),
                f = o(i),
                d = function() {
                    function e(e, t) {
                        for (var n = 0; n < t.length; n++) {
                            var i = t[n];
                            i.enumerable = i.enumerable || !1,
                            i.configurable = !0,
                            "value" in i && (i.writable = !0),
                            Object.defineProperty(e, i.key, i)
                        }
                    }
                    return function(t, n, i) {
                        return n && e(t.prototype, n),
                        i && e(t, i),
                        t
                    }
                } (),
                h = function(e) {
                    function t(e, n) {
                        r(this, t);
                        var i = a(this, (t.__proto__ || Object.getPrototypeOf(t)).call(this));
                        return i.resolveOptions(n),
                        i.listenClick(e),
                        i
                    }
                    return c(t, e),
                    d(t, [{
                        key: "resolveOptions",
                        value: function e() {
                            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
                        }
                    },
                    {
                        key: "listenClick",
                        value: function e(t) {
                            var n = this;
                            this.listener = (0, f.
                        default)(t, "click",
                            function(e) {
                                return n.onClick(e)
                            })
                        }
                    },
                    {
                        key: "onClick",
                        value: function e(t) {
                            var n = t.delegateTarget || t.currentTarget;
                            this.clipboardAction && (this.clipboardAction = null),
                            this.clipboardAction = new s.
                        default({
                                action:
                                this.action(n),
                                target: this.target(n),
                                text: this.text(n),
                                trigger: n,
                                emitter: this
                            })
                        }
                    },
                    {
                        key: "defaultAction",
                        value: function e(t) {
                            return l("action", t)
                        }
                    },
                    {
                        key: "defaultTarget",
                        value: function e(t) {
                            var n = l("target", t);
                            if (n) return document.querySelector(n)
                        }
                    },
                    {
                        key: "defaultText",
                        value: function e(t) {
                            return l("text", t)
                        }
                    },
                    {
                        key: "destroy",
                        value: function e() {
                            this.listener.destroy(),
                            this.clipboardAction && (this.clipboardAction.destroy(), this.clipboardAction = null)
                        }
                    }]),
                    t
                } (u.
            default);
                e.exports = h
            })
        },
        {
            "./clipboard-action": 7,
            "good-listener": 4,
            "tiny-emitter": 6
        }]
    },
    {},
    [8])(8)
});

这部份的JS文件确实很多,因为对方写的是一个控件,所以代码很多。

然后在页面里引用这个JS文件即可,引用方式:

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

在mediawiki中加入复制按钮



mediawiki中我在网站最底部加入的上面的代码,然后对btn样式进行了绝对位置定位,让按钮隐藏在了左侧,现在放出来加入的方法,为什么放出呢?因为我相信很多人会舍充用mediawiki,并将里面的内容进行对外迁移,这是一种省事的方法。

因为要对Mediawiki的标题和内容都进行复制,所以我放了两个按钮,这样想复制什么内容就点击哪个。

代码放置的文件:

skins/Vector/   目录下的  VectorTemplate.php,文件,在里面搜索:</body> ,在这个标签上方加入以下代码:

<!-- 以下为点击复制代码 -->
<style>
.btn {
	top: 430px;
	left: 39px;
	position: absolute;
	font-size: 9px;
	color: #0645AD;
	}	
.nr {
	top: 460px;
	left: 39px;
	position: absolute;
	font-size: 9px;
	color: #0645AD;
	}	
</style>
<div class="btn">复制标题</div>
<div class="nr">复制内容</div>
    <script src="/clipboard.min.js"></script>
    <script>
    var clipboard = new Clipboard('.btn', {
        target: function() {
            return document.getElementById('firstHeading');
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
    <script>
    var clipboard = new Clipboard('.nr', {
        target: function() {
            return document.getElementById('mw-content-text');
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
<!-- 点击复制代码结束 -->

加入后,传上去,同时记得把 clipboard.min.js 上传到你的根目录就可以使用了。

右侧图片是我加入后隐藏于左侧状态栏的效果。

对mediawki按钮位置的突发奇想修改


因为按钮是查找class样式名称来定义点击的地方,我看了下mediawiki1.26.3中,标题样式名称是:firstHeading,而内容区样式名称是:mw-content-ltr,所以直接将这两个写在了里面,结果发现还真是管用的,这样复制起来就方便多了,不用非把鼠标移动到左侧点那两个按钮。把修改完的代码放出来:

<!-- 以下为点击复制代码 -->
    <script src="/clipboard.min.js"></script>
    <script>
    var clipboard = new Clipboard('.firstHeading', {
        target: function() {
            return document.getElementById('firstHeading');
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
    <script>
    var clipboard = new Clipboard('.mw-content-ltr', {
        target: function() {
            return document.getElementById('mw-content-text');
        }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
<!-- 点击复制代码结束 -->

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND