HTML点击链接复制到剪切板

前言

我在捣鼓个人博客时发现，主题中点击 图标时发现，原有的网页打开QQ添加好友或者临时对话的链接不起作用了，网页打开QQ显示当前不支持。

原有代码是：

<a target="_blank" href="tencent://message/?uin=<?php echo $this->options->freeLinkQQ; ?>&amp;site=qq&amp;menu=yes"><i class="fa fa-qq"></i></a>

<!-- Or -->

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=<?php echo $this->options->freeLinkQQ; ?>&amp;site=qq&amp;menu=yes"><i class="fa fa-qq"></i></a>

点击复制链接

现在想一个方案替换上面所述，考虑点击链接，然后复制站长QQ号到剪切板，网上搜索了若干方案，最终选择借助第三方JS库clickboard.js，代码如下：

<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js" </script>
<a href="javascript:;" onclick="shareCopyUrl(this)" data-clipboard-text="<?php echo $this->options->freeLinkQQ; ?>"><i class="fa fa-qq"></i></a>
<script>
	function shareCopyUrl(that) {
    var clipboard = new ClipboardJS(that);
    clipboard.on('success', function (e) {
      console.info('Copy QQ:', e.text);
      alert("QQ复制成功");
      e.clearSelection();
    });

    clipboard.on('error', function (e) {
      // console.error('Action:', e.action);
      // console.error('Trigger:', e.trigger);
    });
    // 处理第一次点击不成功
    clipboard.onClick(event);
	}

</script>

修改后点击图标后QQ号就复制到剪切板了。

参考

https://blog.csdn.net/muzidigbig/article/details/117918741