数据API 案例 开发者 关于
掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务

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

使用剪贴板是一项基本技能。作为码农都应知道,Tab,Ctrl/Cmd + A,Ctrl / Cmd + C以及Ctrl / Cmd + V分别是自动聚焦、复制、粘贴的快捷键。

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

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

关于剪贴板的安全

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

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

现在的剪贴板基本功能有限,有如下限制:

  1. 大多数浏览器支持剪贴板,除了Safari。(译注,Safari其实已经支持)
  2. 支持因浏览器而异,有些功能不完整或有问题。
  3. 事件必须由用户必须发起,如点击鼠标或按下键盘。脚本不能自由访问剪贴板。

document.execCommand()

此方法就是实现剪贴板的关键,它可以传入cut,copy,paste三种参数。从最常用的document.execCommand('copy')开始介绍。

在使用之前,我们应该检查浏览器是否支持copy命令:document.queryCommandSupported('copy');或document.queryCommandEnabled('copy');,这两个方法效果相同。

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

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

    // select text in #myelement node
    var
      myelement = document.getElementById('#myelement'),
      range = document.createRange();

    range.selectNode(myelement);
    window.getSelection().addRange(range);

但IE / Edge不支持。

clipboard.js

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

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

自己动手实现

clipboard.js大小仅2Kb,若仅实现如下的部分功能的话,那么可以在20行的代码内实现:

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

像clipboard.js一样,先创建一个button用于触发方法,它具有一个data属性data-copytarget,指向要copy的元素(即#website)

<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>

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

(function() {

  'use strict';

  // click events
  document.body.addEventListener('click', copy, true);

  // event handler
  function copy(e) {

    // find target element
    var
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);

    // is element selectable?
    if (inp && inp.select) {

      // select text
      inp.select();

      try {
        // copy text
        document.execCommand('copy');
        inp.blur();
      }
      catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }

    }
  }
})();

示例

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

总结:

  1. 通过.select()选择要复制的表单元素的内容
  2. 调用document.execCommand("copy")方法
  3. 调用.blur()方法,从表单元素中移除焦点
  4. 将第2、3步包在try catch块中,在不支持的浏览器下则提示

其他方式

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

PS: 若有任何建议或问题请联系我~

原文来自:众成翻译

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

掌握聚合最新动态了解行业最新趋势
API接口,开发服务,免费咨询服务
20行JS代码实现粘贴板功能
发布:2018-02-07

使用剪贴板是一项基本技能。作为码农都应知道,Tab,Ctrl/Cmd + A,Ctrl / Cmd + C以及Ctrl / Cmd + V分别是自动聚焦、复制、粘贴的快捷键。

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

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

关于剪贴板的安全

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

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

现在的剪贴板基本功能有限,有如下限制:

  1. 大多数浏览器支持剪贴板,除了Safari。(译注,Safari其实已经支持)
  2. 支持因浏览器而异,有些功能不完整或有问题。
  3. 事件必须由用户必须发起,如点击鼠标或按下键盘。脚本不能自由访问剪贴板。

document.execCommand()

此方法就是实现剪贴板的关键,它可以传入cut,copy,paste三种参数。从最常用的document.execCommand('copy')开始介绍。

在使用之前,我们应该检查浏览器是否支持copy命令:document.queryCommandSupported('copy');或document.queryCommandEnabled('copy');,这两个方法效果相同。

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

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

    // select text in #myelement node
    var
      myelement = document.getElementById('#myelement'),
      range = document.createRange();

    range.selectNode(myelement);
    window.getSelection().addRange(range);

但IE / Edge不支持。

clipboard.js

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

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

自己动手实现

clipboard.js大小仅2Kb,若仅实现如下的部分功能的话,那么可以在20行的代码内实现:

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

像clipboard.js一样,先创建一个button用于触发方法,它具有一个data属性data-copytarget,指向要copy的元素(即#website)

<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>

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

(function() {

  'use strict';

  // click events
  document.body.addEventListener('click', copy, true);

  // event handler
  function copy(e) {

    // find target element
    var
      t = e.target,
      c = t.dataset.copytarget,
      inp = (c ? document.querySelector(c) : null);

    // is element selectable?
    if (inp && inp.select) {

      // select text
      inp.select();

      try {
        // copy text
        document.execCommand('copy');
        inp.blur();
      }
      catch (err) {
        alert('please press Ctrl/Cmd+C to copy');
      }

    }
  }
})();

示例

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

总结:

  1. 通过.select()选择要复制的表单元素的内容
  2. 调用document.execCommand("copy")方法
  3. 调用.blur()方法,从表单元素中移除焦点
  4. 将第2、3步包在try catch块中,在不支持的浏览器下则提示

其他方式

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

PS: 若有任何建议或问题请联系我~

原文来自:众成翻译

声明:所有来源为“聚合数据”的内容信息,未经本网许可,不得转载!如对内容有异议或投诉,请与我们联系。邮箱:marketing@think-land.com

选择想要的接口, 看看能免费获取多少次调用 选择(单选)或填写想要的接口
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 风险信息查询
  • 企业工商信息
短信API服务
  • 短信API服务
  • 银行卡四元素检测[简]
  • 身份证实名认证
  • 手机状态查询
  • 三网手机实名制认证[简]
  • 身份证OCR识别
  • 风险信息查询
  • 企业工商信息
  • 确定
选择您的身份
请选择寻找接口的目的
预计每月调用量
请选择预计每月调用量
产品研发的阶段
请选择产品研发的阶段
×

前往领取
×
企业用户认证,
可获得1000次免费调用
注册登录 > 企业账户认证 > 领取接口包
企业用户认证领取接口包 立即领取
× 企业用户认证,
可获得1000次免费调用,立即领取>
数 据 驱 动 未 来
Data Drives The Future