使用剪贴板.js将文本复制到剪贴板后，如何将按钮更改为“已复制！”？

Question

以下HTML页面来自剪贴板js.com的剪贴板剪贴板演示。 我喜欢它的工作方式，突出显示文本。

但是，我要求它将按钮从显示“复制”更改为“已复制！”。 一旦用户单击了按钮，它就成功完成了复制到剪贴板的操作。

   <!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) {
    e.clearSelection();
    e.trigger.textContent = 'Copied!';
});

在使用自定义事件的部分中引用本教程的内容：

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

Answer 2

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

使用剪贴板.js将文本复制到剪贴板后，如何将按钮更改为“已复制！”？

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-09-19 23:06:45

解决方案2
0 2017-09-19 23:03:04

使用剪贴板.js将文本复制到剪贴板后，如何将按钮更改为“已复制！”？

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-09-19 23:06:45

解决方案2 0 2017-09-19 23:03:04

解决方案1
3 已采纳 2017-09-19 23:06:45

解决方案2
0 2017-09-19 23:03:04