IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

Google Docs Ctrl + C 技术浅析

岁月如歌 2010-07-27 23:22:51 累计浏览 2,710 次
本机暂存

    用 google docs 打开 pdf 文件,选中文本:

    原图已失效

    表面上没有任何有趣的地方。但仔细一看,会发现选区的颜色是浅蓝色,而不是默认蓝。第一直觉是是有什么特殊的 CSS 属性,立马 firebug:

    原图已失效

    不看不知道,一看真蹊跷。selection-highlight 是选区,选区下面是一张图片 page-image!

    于是立刻发现一个非常牛逼的特性:Ctrl + C 可以复制图片中的文字!

    google 太强悍了,好在前端代码都是开源的,下面简单分析下。

    首先数据在哪呢,这个比较容易找到,在 firebug 里有一个请求返回的数据如下:

以下是代码片段:
<?xml version="1.0" encoding="UTF-8"?>

<pdf2xml>
<meta name="Creator" content="Adobe Acrobat 8.1 Combine Files"/>
<meta name="Producer" content="Adobe Acrobat 8.1"/>
<meta name="CreationDate" content="20100316080708-04’00’"/>
<page t="0" l="0" w="612" h="773">
 <text l="188" t="754" w="237" h="11" p="188,24,214,15,232,37,271,
7,280,39,322,7,330,11,344,24,370,23,395,20,418,7">
Please post comments or corrections to the Author Online forum at</text>
...

    有了这份数据,就可以根据选区得到对应的文本。

    接下来的问题是,如何将文本放到剪贴板里?第一反应是用 flash 实现,但感觉 google 不会这么做。禁用掉 flash 插件后,功能正常,这说明是用 js 实现的。

    通过 Profile 工具 + Fiddler + 肉眼识别 + 运气,终于定位到了关键代码:

以下是代码片段:
n.am = function(a) {
    if (! (!this.k.Ca && Mr(this, a))) {
        ac && this.lf.focus();
        this.lf.select();
        Nr(this, a)
    }
};

    只要注释掉上面的代码,Ctrl + C 复制功能就无效。focus 和 select 为我们提供了进一步线索,在 HTML 里,发现了秘密:

    原图已失效

    到此真相大白:当用户按下 Ctrl + C 时,js 会注入事件,首先根据坐标从数据里取出对应文本,然后将文本赋值给 textarea, 并将其激活和选中。这样,就和用户选中 textarea 的内容,再按下 Ctrl + C 的效果是一样了。

    强悍的 google, 技术创新无处不在!

    注意:利用 textarea 只能复制纯文本,如果想复制富文本,可以借鉴 google docs 编辑 Word 文档时的处理方式:采用 iframe 充当临时容器,有兴趣的可以进一步研究。

    简单演示:goog-docs-copy-demo.html

    发现这个秘密后,最近在疯狂搞编辑的牛人承玉(欢迎搞编辑器的其他牛人加盟)立刻想到了各大站长们非常喜爱的功能:附带警告信息的禁止copy. 据说,能成功复制的,都不是“人”。

    我的尝试是:点击按钮,复制指定文本到 Clipboard 里。应用场景是点击按钮复制证件号码等。尝试代码大家可以看上面 demo 页面源码中的注释。事件可以正常模拟并分发出去,但复制操作惨兮兮地失败了。感觉原因在于浏览器安全限制,对于触发的异步 Ctrl + C, 浏览器会限制其功能。

    Google 的产品里有很多秘密,真诱人,创意无限!

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,349)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,848)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  9. 什么是全栈工程师? (累计阅读 14,038)
  10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)