使用 Clipboard.js 通过 class 更改按钮文本
Using Clipboard.js to change button text by a class
我找到了这个
但它会导致错误:$ 不是函数,请参见下面的屏幕截图
https://www.awesomescreenshot.com/image/8535357?key=55d48e1db3b3e996966454c551958fac
在有人通过 class 而不是 ID[ 点击按钮后,如何用 Clipboard.js 更改按钮文本=35=]?
比如按钮文字会变成'copied',一段时间后会自动变回原来的文字
下面是我的代码:
<button
class="copyElement"
data-clipboard-text="123"
>
<span>Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>new ClipboardJS('.copyElement');</script>
使用 success
事件而不使用 jQuery
https://clipboardjs.com/#events
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let oldtext = e.trigger.textContent
e.trigger.textContent = 'Copied!'
setTimeout(() => e.trigger.textContent = oldtext, 2000)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<button class="copyElement" data-clipboard-text="123">
<span>Take Me There 1</span>
</button>
<button class="copyElement" data-clipboard-text="456">
<span>Take Me There 2</span>
</button>
我找到了这个
但它会导致错误:$ 不是函数,请参见下面的屏幕截图
https://www.awesomescreenshot.com/image/8535357?key=55d48e1db3b3e996966454c551958fac
在有人通过 class 而不是 ID[ 点击按钮后,如何用 Clipboard.js 更改按钮文本=35=]?
比如按钮文字会变成'copied',一段时间后会自动变回原来的文字
下面是我的代码:
<button
class="copyElement"
data-clipboard-text="123"
>
<span>Take Me There</span>
</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>new ClipboardJS('.copyElement');</script>
使用 success
事件而不使用 jQuery
https://clipboardjs.com/#events
var clipboard = new ClipboardJS('.copyElement')
clipboard.on('success', function(e) {
let oldtext = e.trigger.textContent
e.trigger.textContent = 'Copied!'
setTimeout(() => e.trigger.textContent = oldtext, 2000)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<button class="copyElement" data-clipboard-text="123">
<span>Take Me There 1</span>
</button>
<button class="copyElement" data-clipboard-text="456">
<span>Take Me There 2</span>
</button>