有时可能需要在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>
代码实现同时复制一段文字和文字的超链接。
我的微信
微信扫一扫
13832413877
我的微信公众号
微信扫一扫
我的公众号
评论