单击 w/clipboard.js 后更改按钮文本 [英] change button text after click w/ clipboard.js
本文介绍了单击 w/clipboard.js 后更改按钮文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 clipboard.js 复制我网页上的一些文本.我做得很好,但我想在用户点击复制文本后更改按钮文本.
这是我目前所拥有的:带有文本的 div:
测试文本
一个按钮:
<button class="btn" id="copy-button" data-clipboard-target="#landingpage"onclick="myFunction()">复制内容</button>
和 JavaScript:
如何在单击后将按钮文本更改为已复制",然后在几秒钟后将其恢复为已复制".
谢谢.
解决方案
您可以监听 clipboard
的 success
事件并更改文本.
JS
$(function() {var $btnCopy = $('#copy-button');$btnCopy.on('点击', function() {var clipboard = new Clipboard('#copy-button');clipboard.on('success', function(e) {$btnCopy.text('复制');设置超时(函数(){$btnCopy.text('复制');}, 2000);});});});
HTML
测试文本</div><button class="btn" id="copy-button" data-clipboard-target="#landingpage">复制内容</button>I'm using clipboard.js to copy some text on my webpage. I've go that working great but I'd like to change the button text after a user clicks to copy the text.
Here's what I have so far:
a div with the text:
<div #landingpage>
TEST TEXT
</div>
a button:
<button class="btn" id="copy-button" data-clipboard-target="#landingpage"
onclick="myFunction()">Copy Content</button>
and javascript:
<script>
(function(){
new Clipboard('#copy-button');
})();
</script>
How do change button text to "Copied" after I click and then have it revert back to just "Copy" after a few seconds.
Thank you.
解决方案 You could listen to the success
event of the clipboard
and change the text.
JS
$(function() {
var $btnCopy = $('#copy-button');
$btnCopy.on('click', function() {
var clipboard = new Clipboard('#copy-button');
clipboard.on('success', function(e) {
$btnCopy.text('Copied');
setTimeout(function() {
$btnCopy.text('Copy');
}, 2000);
});
});
});
HTML
<div id="landingpage"> TEST TEXT </div>
<button class="btn" id="copy-button" data-clipboard-target="#landingpage">Copy Content</button>
这篇关于单击 w/clipboard.js 后更改按钮文本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文