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