微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript-单击带有剪贴板的更改按钮文本

我正在使用剪贴板.js在我的网页上复制一些文本.我的工作很棒,但我想在用户单击以复制文本后更改按钮文本.

这是我到目前为止的内容
包含以下内容的div:

<div #landingpage>
TEST TEXT
</div>

一个按钮:

<button class="btn" id="copy-button" data-clipboard-target="#landingpage" 
onclick="myFunction()">copy Content</button>

和javascript:

<script>
(function(){
  new Clipboard('#copy-button');
})();
</script>

单击后如何将按钮文本更改为“复制”,然后在几秒钟后将其恢复为“复制”.

谢谢.

解决方法:

您可以听剪贴板的成功事件并更改文本.

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>

Check Fiddle

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐