gpt4 book ai didi

javascript - 使用 Clipboard.js 将文本复制到剪贴板后,如何将按钮更改为 "Copied!"?

转载 作者:行者123 更新时间:2023-11-28 14:46:10 27 4
gpt4 key购买 nike

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

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

   <!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>

最佳答案

这对我有用:

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

引用此tutorial关于使用自定义事件:

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

关于javascript - 使用 Clipboard.js 将文本复制到剪贴板后,如何将按钮更改为 "Copied!"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46310866/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com