发布时间:2026/7/6 6:00:58
一个“粘贴”按钮背后,其实是两套完全不同的 API
我原来一直以为给上传功能加一个粘贴图片应该就是一行代码的事。但是当我想要支持CtrlV、又加一个粘贴按钮时才发现居然是两套本质不同的浏览器 API。被动的clipboardData(paste 事件)用户按CtrlV时浏览器派发一个paste事件数据在event.clipboardData里const handlePaste (event: React.ClipboardEvent) { const files Array.from(event.clipboardData?.items || []) .filter((it) it.kind file it.type.startsWith(image/)) .map((it) it.getAsFile()) .filter(Boolean) as File[]; if (files.length) handleFiles(files); };它的特点是不需要权限、所有浏览器都支持。因为是用户主动粘贴浏览器认为这是可信操作。主动的navigator.clipboard.read()(按钮触发)但点按钮读剪贴板不一样用户没按CtrlV是代码主动去读const items await navigator.clipboard.read(); for (const item of items) { const type item.types.find((t) t.startsWith(image/)); if (type) { const blob await item.getType(type); handleFiles([new File([blob], pasted.${type.split(/)[1]}, { type })]); } }代价是首次会弹权限授权框、Firefox 对图片read()支持差。它们是两条路不是同一功能的两种写法。clipboardData(CtrlV)clipboard.read()(按钮)权限弹窗不需要需要浏览器兼容全支持Firefox 图片支持差焦点要求需要(见下)无所谓隐藏最深的坑焦点陷阱onPaste通常绑在某个元素上。但 DOM 元素默认不接收paste事件,除非它可聚焦且已聚焦。于是很多人写成:div tabIndex{0} onPaste{handlePaste}.../div看起来对,实则埋雷:只有当这个 div 被点过、拿到焦点后,CtrlV才生效。而真实用户截完图切回页面时,焦点根本不在上传框上,粘贴静默失败——用户会觉得这功能骗人。正解是把监听挂到window上让页面任意位置都能接住粘贴useEffect(() { if (!enableWindowPaste) return; // 多个上传框时别互相抢事件 const onPaste (e: ClipboardEvent) { /* 同上提取 files */ }; window.addEventListener(paste, onPaste); return () window.removeEventListener(paste, onPaste); }, [enableWindowPaste, items.length]);这些细节我们都落到了 Image2 的上传组件里。结论很简单:粘贴不是一个功能,是两套 API 加一个焦点模型。想做稳,先分清你走的是哪条路。这篇不讲技术细节,讲一个我觉得更有意思的东西:和 AI 一起打磨一个功能,到底是什么体验。起点是一句模糊的需求:能 CtrlV 粘贴上传了,但用户不知道,帮我想几个方案。值得记录的是接下来发生的事——它不是一句话生成代码而是一场来回。它先反问我,而不是急着写。我提到加个粘贴按钮会不会更好,它没有直接照做,而是先把按钮和快捷键是两套剪贴板 API 这件事摊开,列了权限弹窗、浏览器兼容、焦点要求的对比,然后问我:权限弹窗你能接受吗?——把决策权留给我而不是替我拍板。它会主动指出我没问的问题。在看代码时,它发现粘贴监听有个焦点陷阱只有上传框聚焦时CtrlV才生效,而真实场景焦点根本不在那儿。这是我需求里完全没提、自己也没意识到的坑。好的结对对象,价值就在于看见你视野外的东西。选择题用得恰到好处。纠结按钮放哪时它没有替我决定,而是给了三个位置方案、配上文字示意图让我选。我选了标题栏右侧它才据此实现。该给建议时给建议,该让我拍板时让我拍板。它记得收尾。主功能跑通后,它没停,而是继续补了国际化、无障碍 tooltip,甚至主动去核查了几个图标按钮的aria-label——那些我大概率会忘掉的尾巴。四轮下来,最大的感受是:AI 结对的价值不在快,而在它逼着这个小需求暴露出该有的深度——焦点模型、API 取舍、组件通信、i18n、无障碍,一个都没漏。它不是替我思考,而是陪我把一件事想透。这个被磨了四轮后的功能就在 Image2 的图片上传功能里大家有兴趣的可以去体验一下现在的版本欢迎大家提意见。

相关新闻

抖音评论采集终极指南:三步搞定批量评论提取,无需编程经验
2026/7/6 6:00:58

抖音评论采集终极指南:三步搞定批量评论提取,无需编程经验

抖音评论采集终极指南:三步搞定批量评论提取,无需编程经验 【免费下载链接】TikTokCommentScraper 项目地址: https://gitcode.com/gh_mirrors/ti/TikTokCommentScraper 还在为手动复制抖音评论而烦恼吗?想要分析热门视频的用户反馈却…

阅读更多
ANI-RSS刮削功能完全指南:3分钟打造专业级媒体库元数据
2026/7/6 5:00:58

ANI-RSS刮削功能完全指南:3分钟打造专业级媒体库元数据

ANI-RSS刮削功能完全指南:3分钟打造专业级媒体库元数据 【免费下载链接】ani-rss 基于RSS自动追番、订阅、下载、刮削、洗版 项目地址: https://gitcode.com/gh_mirrors/an/ani-rss 还在为杂乱无章的动漫收藏烦恼吗?想让你的媒体库像Netflix一样精…

阅读更多
硅基流动递表港交所:Token 工厂的“高增长、高亏损“困局
2026/7/6 5:00:58

硅基流动递表港交所:Token 工厂的“高增长、高亏损“困局

6 月 30 日,北京硅基流动科技股份有限公司向港交所递交上市申请,拟按第 18C 章"特专科技公司"规则在主板挂牌,华泰国际和海通国际担任联席保荐人。这家 2023 年 8 月才成立的公司,把自己定位成 AI 时代的"Token 工…

阅读更多
【Springboot毕设全套源码+文档】基于springboot协同过滤算法的非遗文化交流平台(丰富项目+远程调试+讲解+定制)
2026/7/6 7:00:58

【Springboot毕设全套源码+文档】基于springboot协同过滤算法的非遗文化交流平台(丰富项目+远程调试+讲解+定制)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

阅读更多
3分钟快速解锁网易云音乐:ncmdump格式转换终极指南
2026/7/6 7:00:58

3分钟快速解锁网易云音乐:ncmdump格式转换终极指南

3分钟快速解锁网易云音乐:ncmdump格式转换终极指南 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否曾为网易云音乐下载的歌曲无法在其他设备播放而烦恼?🎵 今天我要介绍的ncmdump工具&#…

阅读更多
跨越天际:从智能汽车到 eVTOL 的适航与系统级开发34——空地链路丢失(Lost Link)时的紧急自主返航与避障降落控制逻辑
2026/7/6 7:00:58

跨越天际:从智能汽车到 eVTOL 的适航与系统级开发34——空地链路丢失(Lost Link)时的紧急自主返航与避障降落控制逻辑

本文详细探讨了eVTOL(电动垂直起降飞行器)在空地链路丢失(LostLink)状态下的应急控制逻辑。与智能汽车的网络中断不同,eVTOL的链路丢失属于灾难性事件,需要严格的适航审定标准(DO-178C DALA级&a…

阅读更多
工业4-20mA电流环设计与STM32实现技巧
2026/7/6 7:00:58

工业4-20mA电流环设计与STM32实现技巧

1. 4-20mA电流环技术背景与XTR116选型依据工业现场最头疼的问题莫过于长距离信号传输中的噪声干扰和电压衰减。我在化工厂做自动化改造时,曾遇到过传感器信号传输300米后失真率达到15%的案例。这正是4-20mA电流环技术至今仍是工业控制领域黄金标准的原因——电流信号…

阅读更多
LTC6903与PIC18LF47K40实现高精度数字控制振荡器设计
2026/7/6 7:00:58

LTC6903与PIC18LF47K40实现高精度数字控制振荡器设计

1. 项目背景与核心器件选型 数字控制振荡器(DCO)在现代电子系统中扮演着关键角色,特别是在需要精确频率调节的场合。LTC6903作为Linear Technology(现属ADI)推出的经典可编程振荡器IC,具有以下突出特性: 频率范围:1kHz至68MHz&am…

阅读更多
Reset Windows Update Tool:拯救Windows更新故障的终极解决方案
2026/7/6 6:00:58

Reset Windows Update Tool:拯救Windows更新故障的终极解决方案

Reset Windows Update Tool:拯救Windows更新故障的终极解决方案 【免费下载链接】Reset-Windows-Update-Tool Troubleshooting Tool with Windows Updates (Developed in Dev-C). 项目地址: https://gitcode.com/gh_mirrors/re/Reset-Windows-Update-Tool 当…

阅读更多
通达OA SQL注入漏洞深度剖析:从手工注入到自动化利用与防御
2026/7/5 0:00:50

通达OA SQL注入漏洞深度剖析:从手工注入到自动化利用与防御

1. 项目概述与漏洞背景最近在梳理一些历史OA系统的安全风险时,通达OA v11.6版本中的一个老漏洞又进入了我的视线。这个漏洞位于/general/bi_design/appcenter/report_bi.func.php文件中,是一个典型的SQL注入点。虽然这个漏洞的利用方式看起来并不复杂&am…

阅读更多
3步彻底解决Windows右键菜单混乱问题:ContextMenuManager使用全攻略
2026/7/5 0:00:50

3步彻底解决Windows右键菜单混乱问题:ContextMenuManager使用全攻略

3步彻底解决Windows右键菜单混乱问题:ContextMenuManager使用全攻略 【免费下载链接】ContextMenuManager 🖱️ 纯粹的Windows右键菜单管理程序 项目地址: https://gitcode.com/gh_mirrors/co/ContextMenuManager 你是否曾为Windows右键菜单中那些…

阅读更多
GXDE OS下Wayland兼容性实战:从deepin-mutter原理到VMware Tools修复
2026/7/5 0:00:50

GXDE OS下Wayland兼容性实战:从deepin-mutter原理到VMware Tools修复

如果你正在用 GXDE OS 或者任何基于 Deepin 的发行版,并且遇到了“检测到窗口系统采用 Wayland 协议,程序即将退出”这类弹窗,或者发现 VMware Tools 在 Ubuntu 24.04 这类默认 Wayland 的系统上启动失败,那这篇文章就是为你准备的…

阅读更多
星露谷物语终极MOD指南:5个步骤打造智能自动化农场
2026/7/6 0:00:56

星露谷物语终极MOD指南:5个步骤打造智能自动化农场

星露谷物语终极MOD指南:5个步骤打造智能自动化农场 【免费下载链接】StardewMods Mods for Stardew Valley using SMAPI. 项目地址: https://gitcode.com/gh_mirrors/st/StardewMods 你是否厌倦了在星露谷物语中重复收割、加工、存储的繁琐操作?梦…

阅读更多
免费二维码修复工具终极指南:三步拯救损坏二维码
2026/7/6 0:00:56

免费二维码修复工具终极指南:三步拯救损坏二维码

免费二维码修复工具终极指南:三步拯救损坏二维码 【免费下载链接】qrazybox QR Code Analysis and Recovery Toolkit 项目地址: https://gitcode.com/gh_mirrors/qr/qrazybox 你是否曾经面对一个损坏的二维码束手无策?模糊、破损、打印质量差的二…

阅读更多
acme.sh私钥加密存储:基于OpenSSL的自动化证书安全管理方案
2026/7/6 0:00:56

acme.sh私钥加密存储:基于OpenSSL的自动化证书安全管理方案

1. 项目概述:为什么我们需要加密存储私钥?在运维和开发领域,使用 Let‘s Encrypt 等免费 CA 通过 ACME 协议自动化签发和管理 SSL/TLS 证书,已经成为标准实践。acme.sh作为这个领域的佼佼者,以其轻量、强大和脚本化的特…

阅读更多
基于Dify与DeepSeek构建私有知识库问答系统实战指南
2026/7/4 11:17:16

基于Dify与DeepSeek构建私有知识库问答系统实战指南

在业务中快速构建一个能理解私有文档、准确回答专业问题的智能助手,是很多开发团队面临的共同挑战。传统方案往往需要从零开始搭建复杂的 RAG(检索增强生成)系统,涉及文档解析、向量化、检索、大模型调用等多个环节,整…

阅读更多
FAE放射组学分析工具:医学影像特征探索的完整解决方案
2026/7/4 5:24:16

FAE放射组学分析工具:医学影像特征探索的完整解决方案

FAE放射组学分析工具:医学影像特征探索的完整解决方案 【免费下载链接】FAE FeAture Explorer 项目地址: https://gitcode.com/gh_mirrors/fae/FAE 你是否曾经面对海量医学影像数据感到无从下手?想要从CT、MRI等影像中提取有价值的定量特征&#…

阅读更多
DesktopNaotu:你的终极离线思维导图解决方案,告别网络依赖!
2026/7/5 15:33:35

DesktopNaotu:你的终极离线思维导图解决方案,告别网络依赖!

DesktopNaotu:你的终极离线思维导图解决方案,告别网络依赖! 【免费下载链接】DesktopNaotu 桌面版脑图 (百度脑图离线版,思维导图) 跨平台支持 Windows/Linux/Mac OS. (A cross-platform multilingual Mind Map Tool) 项目地址:…

阅读更多