网页一键复制功能

做了一个小功能，方便用户在网页中一键复制。

像本站，经常分享一些下载链接，网盘资源，礼包码这些东西。

用户手动复制起来比较麻烦，所以做了这个一键复制的小功能。

下面是源码，直接分享给大家

<div id="copy">
    <style>#giftCode {
            font-size: 20px;
            padding: 10px;
            border: 1px solid #ccc;
            display: inline-block;
            margin-bottom: 20px;
            cursor: pointer;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
        }</style><!-- 礼包码显示 -->
    <div id="giftCode">
        h:/UuTHu5n15Pf 或复制此消息打开支付宝搜索，一起来赚最高100元赏金啦 &nbsp;P:/d MF8785 2021/04/16
    </div><!-- 复制按钮 -->
    <p>
        <button id="copyButton">复制礼包码</button>
    </p><script>const giftCode = "h:/UuTHu5n15Pf 或复制此消息打开支付宝搜索，一起来赚最高100元赏金啦  P:/d MF8785 2021/04/16";
        // 通用复制函数（带 fallback）
        function copyText(text, callback) {
            if (navigator.clipboard && navigator.clipboard.writeText) {
                navigator.clipboard.writeText(text).then(function() {
                    callback(true);
                }).catch(function(err) {
                    console.error("Clipboard API 失败:", err);
                    fallbackCopy(text, callback);
                });
            } else {
                fallbackCopy(text, callback);
            }
        }
        // 兼容方案
        function fallbackCopy(text, callback) {
            const textarea = document.createElement("textarea");
            textarea.value = text;
            textarea.style.position = "fixed";
            textarea.style.opacity = 0;
            document.body.appendChild(textarea);
            textarea.focus();
            textarea.select();
            try {
                const ok = document.execCommand("copy");
                callback(ok);
            } catch (err) {
                console.error("execCommand 复制失败:", err);
                callback(false);
            }
            document.body.removeChild(textarea);
        }
        // 提示用户手动打开支付宝
        function promptOpenAlipay() {
            alert("礼包码已复制！请手动打开支付宝使用。");
        }
        // 复制按钮点击事件
        document.getElementById("copyButton").addEventListener("click", function() {
            copyText(giftCode, function(success) {
                if (success) {
                    promptOpenAlipay();
                } else {
                    alert("复制失败，请手动复制！");
                }
            });
        });
        // 点击礼包码框也复制
        document.getElementById("giftCode").addEventListener("click", function() {
            copyText(giftCode, function(success) {
                if (success) {
                    promptOpenAlipay();
                } else {
                    alert("复制失败，请手动复制！");
                }
            });
        });</script>
</div>

这个源码，考虑到，各位站长，有的开启了https，而有的没开启的情况做了兼容。

如果没开启https的情况下，navigator.clipboard是会报错的，主要是浏览器认为本地或者https的情况下，才是安全访问。

才会执行，不然点击之后，就不会生效，所以，我这里的代码，直接兼容了两种情况。

为了方便，用户除了点击按钮，点击礼包码的框，也会一键复制上。

编辑:千欧中软

阅读量:30

url链接:https://www.qozr.com/cms_wang-ye-yi-jian-fu-zhi-gong-neng.html

Tag标签: