浮萍漂泊本无根
天涯游子君莫问

在WordPress主题中添加一个复制按钮

有时可能需要在WordPress主题中添加一个复制按钮,方便用户复制链接或验证码之类的,这里提供一段简单的复制代码,供参考。

html代码:

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

js代码:

<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>

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

赞(0) 打赏
未经允许不得转载:主题秀 » 在WordPress主题中添加一个复制按钮

评论 抢沙发

评论前必须登录!

 

更好的WordPress主题

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

联系我们联系我们

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续提供更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫

微信扫一扫

登录

找回密码

注册