记录在WordPress自定义一个复制的按钮

我们有些时候需要在内容中有一个复制按钮的功能，默认当然有一些插件可以实现。我们也可以直接用代码实现。

<div class="copy-box">
	<div class="quote">
		<p class="quoteText">准备复制的内容</p>
		<a class="sourceLink" href="https://itbulu.com">准备复制的链接</a>
	</div>
	<div class="copy-to-clipboard">
		<button class="copy-btn" onclick="copyToClipboard()">复制</button>
	</div>
</div>

这是HTML的部分。

<script>
function copyToClipboard() {
	const quote = document.querySelector('.quoteText').textContent;
	const sourceLink = document.querySelector('.sourceLink').getAttribute('href');
	const copiedText = '文字: ' + quote + '\n链接: ' + sourceLink;
 
	const tempTextArea = document.createElement('textarea');
	tempTextArea.value = copiedText;
	document.body.appendChild(tempTextArea);
	tempTextArea.select();
	document.execCommand('copy');
	document.body.removeChild(tempTextArea);
 
	alert('已复制！');
}
</script>

这是JS的部分。

代码实现同时复制一段文字和文字的超链接。

本文出处：老蒋部落 » 记录在WordPress自定义一个复制的按钮 | 欢迎分享（ 公众号：老蒋朋友圈 ）