如何用20行JS代码实现粘贴板功能

当前位置 : 主页 > 更多 >
如何用20行JS代码实现粘贴板功能
* 来源 :http://www.wildcraftraw.com * 作者 : * 发表时间 : 2018-06-08 22:03 * 浏览 :

  而对普通用户可能就不太容易了。即使用户知道剪贴板是什么,(除了)那些眼神极好或反应很快的人,其他情况下很难以突出显示他们想要的确切文字。若用户不知道键盘快捷键,也看不到隐藏的编辑菜单,或从未使用右键菜单或不知道长按触屏弹出选项菜单,那么他很可能无法察觉到复制功能。

  那么我们是否应该提供一个“复制到剪贴板”按钮来帮助用户?这功能应该会很有用,即使是对快捷键的人非常熟悉的用户来说。

  几年前,浏览器不可能直接使用剪贴板。开发人员不得不通过Flash来实现。

  剪贴板看起来无关紧要,但想象一下,如果浏览器能够随意查看和操作内容,会发生什么。JS脚本(包括第三方脚本)能查看剪贴板内的文本信息,并将密码,信息甚至整个文档发送到远程服务器。

  1.大多数浏览器支持剪贴板,除了Safari。(译注,Safari其实已经支持)

  3.事件必须由用户必须发起,如点击鼠标或按下键盘。脚本不能访问剪贴板。

  但在Chrome下,尽管Chrome确实支持使用copy命名,但两个方法都返回false。所以最好是将检查代码包在一个try-catch代码块中。

  下一步,我们应该允许用户复制什么呢?必须突出显示文本,所有浏览器都可用select()方法选择文本input和textarea内的文本。同时Firefox和Chrome / Opera也支持document.createRange方法,该方法允许从任何元素中选择文本,如下:

  若你不想自己实现一个较为健壮的跨浏览器剪贴板方法的话,clipboard.js可以帮你。它有好几种设置选项的方式,如H5的data属性,设置绑定触发元素以及目标元素,如:

  clipboard.js大小仅2Kb,若仅实现如下的部分功能的线.仅部分表单元素可被复制

  2.若在不支持的浏览器中(没错,就是指Safari)(译注,Safari其实已经支持),可突出显示选中文本,并提示用户按Ctrl / Cmd + C。

  一个立即执行函数表达式绑定click事件的函数,该函数用于解析data-copytarget属性内容,选择对应字段的文本并执行document.execCommand(copy)。若失败,文本保持选中状态,显示提示框:

  虽然在上例中,算上样式和动画的代码,代码已经超过20行了,但动画和样式是可选的。

  有很多新颖的剪贴板应用方式。例如将鼠标悬停在卡片上时,可以按Ctrl / Cmd + C并将该卡片的链接地址复制到剪贴板。其背后实现的方式为:先创建一个包含URL的隐藏表单元素,然后选中并复制其内容。非常巧妙且实用 —— 我怀疑很少有用户知道这个功能!