给作品集加个“复制联系方式”按钮,不用访客手动抄
教程目录
用完整作品页练习添加复制邮箱按钮,成功后核对粘贴结果,自动复制不可用时提供手动复制回退。
作品页上放了邮箱,访客还得拖动鼠标选中文字。可以让 Codex 加一个“复制邮箱”按钮;如果浏览器不允许自动复制,就选中邮箱,让访客手动复制,不把人卡在一个没反应的按钮上。

没有作品页,也能先练
准备电脑上的 Codex 和 Chrome 或 Edge。下载示例包并解压,里面有一份完整的 5-contact.html。先双击打开,看清联系方式所在位置,再在 Codex 里选择这个文件所在的文件夹。
练习邮箱是 hello@example.com。这是示例地址,正式使用前换成你愿意公开的联系方式。
把这段需求交给 Codex
在这份作品页的联系区域加“复制邮箱”按钮,复制hello@example.com。其他内容和样式不改。点击后只有真正复制成功才显示“邮箱已复制”。若浏览器不支持、权限被拒或复制失败,显示只读文本框、选中邮箱,并提示Ctrl+C或长按复制。不要为此引入库,不上传页面,不收集访客信息。
修改完成后,重新双击打开文件或刷新原页面。点击按钮:如果看到成功提示,去记事本里粘贴,确认得到的正好是邮箱,没有多出“邮箱:”三个字。如果出现手动复制区,就按提示复制,再粘贴核对。
为什么有的电脑不能一键复制
浏览器对剪贴板有安全和权限要求,直接双击打开的 file:// 页面不能保证自动复制成功。这里的回退不是故障遮掩,而是给访客一条能继续操作的路。不要让 Codex 为了“修好”按钮,要求你关闭浏览器安全设置。
本例在 Windows 的 Chrome 检查了页面与手动复制回退,并模拟权限拒绝和成功返回来核对提示分支;没有把模拟成功当成真实系统剪贴板已验证。你仍要在自己的浏览器里做一次粘贴检查。
复制错内容时,明确告诉 Codex“只复制邮箱地址”;点击没反应时,把看到的提示和浏览器名称发给它。一次只处理这个按钮,别顺手重做整个作品集。