适用于Blogger的JavaScript点击复制功能实现方案

首先修正你HTML代码里的几个问题：

• 标签拼写错误：<text-area> 要改成 <textarea>
• 页面存在重复的 <body> 标签
• <style> 标签不应放在 <body> 内部，需移至 <head> 中

下面是精简版的JavaScript实现，用事件委托只绑定一个事件监听器，既能满足最少代码量的要求，又能保证所有复制图标正常工作：

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .box{ 
            width:500px; 
            height:250px; 
            border:1px solid #999; 
            position:relative; 
            margin-top:30px; 
            text-align:center; 
            border-radius: 10px; 
            margin-left:auto; 
            margin-right:auto; 
            background:#ebebeb
        }
        .rightCircle{ 
            position:absolute; 
            width:45px; 
            height:45px; 
            border-radius:10%;  
            background:white; 
            right:5px; 
            top:5px;
            cursor: pointer; /* 添加鼠标指针样式，提示可点击 */
        }
        .text-copy{ 
            padding:30px; 
            font-size: 30px;
            height: calc(100% - 60px);
            box-sizing: border-box;
        }
        .imag { 
            padding: 3px; 
            width:35px; 
            height:35px
        }
        textarea{
            width: 100%;
            height: 100%;
            border: none;
            background: transparent;
            font-size: inherit;
            resize: none;
            outline: none;
        }
    </style>
</head>
<body>
    <div class='box'>
        <div class='rightCircle'> 
            <img class='imag' src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Copy_font_awesome.svg/512px-Copy_font_awesome.svg.png' alt="复制图标"/>
        </div>
        <div class='text-copy'> 
            <textarea>text here 1</textarea> 
        </div>
    </div>
    <div class='box'>
        <div class='rightCircle'> 
            <img class='imag' src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Copy_font_awesome.svg/512px-Copy_font_awesome.svg.png' alt="复制图标"/>
        </div>
        <div class='text-copy'> 
            <textarea>text here 2</textarea> 
        </div>
    </div>
    <div class='box'>
        <div class='rightCircle'> 
            <img class='imag' src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Copy_font_awesome.svg/512px-Copy_font_awesome.svg.png' alt="复制图标"/>
        </div>
        <div class='text-copy'> 
            <textarea>text here 3</textarea> 
        </div>
    </div>

    <script>
        // 事件委托：仅绑定一次事件，处理所有复制图标点击
        document.body.addEventListener('click', async (e) => {
            const copyArea = e.target.closest('.rightCircle');
            if (!copyArea) return;
            
            // 找到当前盒子内的文本内容
            const targetText = copyArea.closest('.box').querySelector('textarea').value;
            
            // 调用原生剪贴板API复制文本
            try {
                await navigator.clipboard.writeText(targetText);
                console.log('复制成功');
                // 这里可以添加复制成功的视觉提示，比如临时修改图标样式
            } catch (err) {
                console.error('复制失败:', err);
            }
        });
    </script>
</body>
</html>

核心逻辑说明 #

• 事件委托：只在document.body上绑定一个点击事件，通过closest()方法判断点击目标是否属于复制按钮区域，避免给每个图标单独绑定事件，减少内存占用和代码量。
• 原生剪贴板API：使用navigator.clipboard.writeText()方法，比传统创建临时输入框的复制方式更简洁高效，且符合现代浏览器规范。
• 样式优化：给textarea添加了样式，使其完全贴合盒子布局，同时去掉边框和默认样式，保证视觉效果统一。

内容的提问来源于stack exchange，提问作者kevin mayank