jQuery 如何在按钮点击时复制URL

在本文中，我们将介绍如何使用jQuery在按钮点击时复制URL。

复制URL的需求

在网页中，有时我们需要提供一个按钮，用户点击该按钮时可以复制当前页面的URL。这样，用户就可以方便地将页面URL分享给其他人，而不需要手动复制和粘贴。

使用jQuery实现URL复制功能

使用jQuery实现URL复制功能需要借助一个插件，这个插件是clipboard.js。它可以帮助我们在网页中复制文本内容，包括URL。下面是实现URL复制的代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Copy URL on Button Click</title>

    <!-- 引入jQuery和clipboard.js -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>

    <script>
        $(document).ready(function(){
            // 初始化clipboard
            new ClipboardJS('.btn-copyurl', {
                text: function() {
                    return window.location.href;
                }
            });
        });
    </script>
</head>
<body>
    <button class="btn-copyurl" data-clipboard-target="input#url-input">复制URL</button>
</body>
</html>

上述代码中，我们将jQuery和clipboard.js两个插件引入到了网页中。使用new ClipboardJS()函数初始化clipboard，并设置了text参数为当前页面的URL，即window.location.href。

在按钮的HTML代码中，我们添加了一个btn-copyurl的类，并设置了一个data-clipboard-target属性，其值为input#url-input。这个属性将告诉clipboard所要复制的目标文本。