在WordPress主题中添加一个复制按钮(wordpress复制页面)

雾海梦曦

在WordPress主题中添加一个复制按钮(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>

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


您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (暂无评论,690人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码