如何将 clipboard.js 与 span 标签 onselect 事件一起使用？答案

【问题标题】：How can I use clipboard.js with a span tag onselect event?如何将 clipboard.js 与 span 标签 onselect 事件一起使用？
【发布时间】：2020-02-15 06:22:14
【问题描述】：

我能够创建一个简单的网页，该网页使用 clipboard.js 和一个按钮，该按钮使用
data-clipboard-text="Just because you can doesn't mean you should — clipboard.js" 属性粘贴预定义文本，如 clipboard.js 网站上的文档所示，但现在我想在<span> 标记中放置一些文本，并在选择此文本时复制它。

但是，我不知道如何将data-clipboard-action="copy" data-clipboard-target="span" 属性“绑定”到<span> 标记并使其使用onselect 事件复制<span> 的内容。

是否有我可以在 javaScript 中使用的程序语句来执行复制和粘贴功能？

我的目标是嵌入代码以将选定的文本复制到电子邮件的 HTML 部分，并允许电子邮件的收件人简单地将选定的文本复制到剪贴板，然后可以将其从剪贴板粘贴到输入文本中Web 应用程序页面中的框。

这将简化在平板电脑和手机等触摸屏设备上的复制/粘贴。

【问题讨论】：

标签： javascript html-email clipboard copy-paste selectedtext

【解决方案1】：

您可以使用此代码来获取屏幕的选择，并可以使用“成功”和“错误”事件。阅读剪贴板js的事件和高级部分

var clipboard = new ClipboardJS('button', {
  text: function (trigger) {
     return document.getSelection().toString()
  }
});

【讨论】：

我看到您正在使用一个按钮，我假设 clipboardjs 通过点击事件连接到该按钮。如果我用 span 标签或 span 标签的 id 替换按钮，这仍然有效。即：'#spanID'？连接的元素是否需要数据属性？哦，谢谢！
你可以使用任何你想要的元素
再次感谢您

【解决方案2】：

请查看 iAmADeveloper 的 cmets 以获得答案。

谢谢，iAmADeveloper。

【讨论】：