jquery点击复制按钮

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。点击复制按钮通常是指用户点击一个按钮后，将某个文本内容复制到剪贴板中。

类型

点击复制按钮的功能可以通过多种方式实现，常见的有以下几种：

使用原生 JavaScript 的 document.execCommand('copy') 方法。
使用现代浏览器的 Clipboard API。
使用第三方库，如 clipboard.js。

应用场景

点击复制按钮常用于以下场景：

复制链接地址。
复制优惠券代码。
复制用户信息（如邮箱、电话号码）。

示例代码

以下是使用 jQuery 和 Clipboard API 实现点击复制按钮的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Click to Copy</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="textToCopy" value="Hello, World!">
    <button id="copyButton">Copy</button>

    <script>
        $(document).ready(function() {
            $('#copyButton').click(function() {
                // 使用 Clipboard API
                navigator.clipboard.writeText($('#textToCopy').val())
                    .then(function() {
                        alert('Text copied to clipboard');
                    })
                    .catch(function(error) {
                        console.error('Failed to copy text: ', error);
                        alert('Failed to copy text');
                    });
            });
        });
    </script>
</body>
</html>