在任意html页面中添加一个复制按钮

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

html代码:

<div class="copy-box">
	<div class="quote">
		<p class="quoteText">准备复制的内容</p>
		<a class="sourceLink" href="https://ym3.net">准备复制的链接</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>

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

本文由网友投稿或聚码屋整理自网络,如转载请注明出处:https://www.ym3.net/2546.html

本站发布的内容若侵犯到您的权益,请邮件联系 cnzz8#outlook.com  删除,我们将及时处理!

本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。

本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。

若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。

 游客 发表评论

请先登录OR注册后评论

请先登录

还没有评论,快来说点什么吧~

返回顶部