在使用 clipboard.js 将文本复制到剪贴板后，如何将按钮更改为说 "Copied!"？

Question

以下 HTML 页面来自 clipboardjs.com 的 clipboard.js 演示。我喜欢它的工作原理，它突出显示了文本。

但是，我要求在用户单击按钮并成功完成复制到剪贴板后，将按钮从显示 "Copy" 更改为 "Copied!"。

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>target-input</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <!-- 1. Define some markup -->
        <input id="foo" type="text" value="hello">
        <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

        <!-- 2. Include library -->
        <script src="../dist/clipboard.min.js"></script>

        <!-- 3. Instantiate clipboard -->
        <script>
        var clipboard = new Clipboard('.btn');

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

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

Answer 1

clipboard.on('success', function(e) {
  document.querySelector('data-clipboard-target="#foo"').value = 'Copied!';
});

Answer 2

这对我有用：

clipboard.on('success', function(e) {
    e.clearSelection();
    e.trigger.textContent = 'Copied!';
});

引用tutorial使用自定义事件：

首先，我们使用剪贴板中的 clearSelection() 实用函数清除复制内容区域内的选择。添加这个是可选的。
然后我们将内容设置为“已复制！”

在使用 clipboard.js 将文本复制到剪贴板后，如何将按钮更改为说 "Copied!"？

How do I change the button to say "Copied!" after text is copied to clipboard using clipboard.js?

javascript

clipboard.js