剪贴板.js:单击“复制”按钮时异步获取文本数据

问题描述

我使用https://play.golang.org/p/4Zcbxhy5UoB来处理复制/粘贴,如果在页面加载时得到数据,一切都可以正常工作,但是异步获取数据又如何呢?高级图片如下:当用户单击“复制”按钮时,从后端获取一些文本数据,完成后,显示“已复制”模式以通知用户和用户可以粘贴它。但是,即使我尝试通过javascript触发复制按钮的点击,这似乎也不可行。这是否意味着我必须单击两次复制按钮以启用此功能(一次在获取数据之前,一次在获取数据之后)?

<html>
  <body>
    <button class="copy" data-clipboard-text="">
      Click to copy
    </button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
    <script>
      const btn = document.querySelector('.copy');
      var clickEvent = new Event('click');
      btn.addEventListener('click',function() {
        setTimeout(() => {
          // let's say we fetch text data 'test' from API  after two seconds' time
          btn.setAttribute('data-clipboard-text','test');
          btn.dispatchEvent(clickEvent);
        },2000);
      },false);
      const clipboard = new ClipboardJS('.copy');
      clipboard.on('success',function(e) {
        console.info('Text:',e.text);
      });
    </script> 
  </body>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...