点击网页链接自动复制文本 并弹出复制成功的提示

前言

　　在网页上快速复制文本信息，例如QQ、微信、邮箱、代码、RSS订阅地址等等，为了复制文本更加便捷，让访客和用户在点击链接时一键复制所需文本，并弹出复制成功的提示，这种方法不仅提高了操作的便捷性，还增强了访客和用户的互动体验，效果见下图。

使用方法

一、在前端页面中添加复制文本的链接代码，以复制RSS订阅地址为例。

<a href="#" id="copy-rss-link">点击复制RSS订阅地址</a>

二、在网页底部</body>的上方添加以下代码。

<div id="copy-notification" style="display:none; position:fixed; bottom:20px; right:20px; background-color:#4CAF50; color:white; padding:10px; border-radius:5px;">已自动复制RSS订阅地址</div>
<script>
document.getElementById('copy-rss-link').addEventListener('click', function(event){
    event.preventDefault(); // 阻止链接默认行为

    var textToCopy = 'http://your-rss-feed.com/rss';  // 替换成你想要复制的RSS订阅地址
    var textArea = document.createElement("textarea");
    textArea.value = textToCopy;
    document.body.appendChild(textArea);
    textArea.select();
    try {
        var successful = document.execCommand('copy');
        var msg = successful ? '成功' : '失败';
        console.log('复制文本' + msg);
        if (successful) {
            var notification = document.getElementById('copy-notification');
            notification.style.display = 'block';
            setTimeout(function(){
                notification.style.display = 'none';
            }, 3000); // 3秒后隐藏提示
        }
    } catch (err) {
        console.log('无法复制', err);
    }
    document.body.removeChild(textArea);
});
</script>