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

2024-09-27 22:35:46

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

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

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

关于剪贴板的安全

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

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

现在的剪贴板基本功能有限，有如下限制：

大多数浏览器支持剪贴板，除了Safari。
支持因浏览器而异，有些功能不完整或有问题。
事件必须由用户必须发起，如点击鼠标或按下键盘。脚本不能自由访问剪贴板。

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行的代码内实现：

仅部分表单元素可被复制

若在不支持的浏览器中（没错，就是指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行了，但动画和样式是可选的。

总结：

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

其他方式

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

总结

以上所述是小编给大家介绍的20行JS代码实现粘贴板复制功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

JS复制对应id的内容到粘贴板（Ctrl+C效果）

前言最近在做一个按钮,实现的效果是当点击后复制url到黏贴板,但不是当前页面url,而是对应一个元素的url,且一个页面会有多个url.一开始找到一个方法,但是竟然只兼容IE浏览器,神奇了,竟然有只兼容IE的东西.后来发现一个zeroclipboard.js这个插件,但是怎么也搞不出那个效果,有点麻烦. 最后翻到了一个js封装好的方法,有效! 想要实现的一个效果是,下面html代码: <tr> <td> <a id="copy_{$key}" oncli
JS复制特定内容到粘贴板

<script language="javascript"> function readTxt() { alert(window.clipboardData.getData("text")); } function setTxt() { var t=document.getElementById("txt"); t.select(); window.clipboardData.setData('text',t.createTextRa
js 实现复制到粘贴板的功能代码

他主要有两个参数:第一个是设置要复制的是一段文本,第二个参数是要复制具体的内容,这个内容可以从文本框中或使用innerHTML获取. 简单的实例代码: 复制代码代码如下: <script type="text/javascript"> function copyData() { var copyText = document.getElementById("ctl00_cpRight_txtUrl").value; window.clipboardDa
JavaScript实现复制内容到粘贴板代码

最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag
代码详解JS操作剪贴板

javascript可以轻松操作客户端剪贴板内容,不过只适用IE5以上浏览器. javascript可以使用window.clipboardData对象处理剪贴板内容. 保存到剪贴板的方法setData(param1, param2). param1 :数据类型 text 或 URL等. param2 :数据内容. 从剪贴板读出数据的方法 getdata(param1) 清空数据的方法 clearData(param1) <HTML> <HEAD> <TITLE>测试操
js实现点击图片将图片地址复制到粘贴板的方法

本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法.分享给大家供大家参考.具体如下: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
20行JS代码实现粘贴板复制功能

使用剪贴板是一项基本技能.作为码农都应知道, Tab , Ctrl/Cmd + A , Ctrl / Cmd + C 以及 Ctrl / Cmd + V 分别是自动聚焦.复制.粘贴的快捷键. 而对普通用户可能就不太容易了.即使用户知道剪贴板是什么,(除了)那些眼神极好或反应很快的人,其他情况下很难以突出显示他们想要的确切文字.若用户不知道键盘快捷键,也看不到隐藏的编辑菜单,或从未使用右键菜单或不知道长按触屏弹出选项菜单,那么他很可能无法察觉到复制功能. 那么我们是否应该提供一个"复制到剪贴板&q
20行JS代码实现网页刮刮乐效果

分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) <canvas id="canvas" width="400" height="300"></canvas> </body> 没什么要特别注意的为了效果加了些CSS样式 CSS部分 <style type=&
20行js代码实现的贪吃蛇小游戏

前言最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
不到30行JS代码实现Excel表格的方法

本文实例讲述了不到30行JS代码实现Excel表格的方法,可见jQuery并非不可替代.分享给大家供大家参考.具体分析如下: 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: ① 由不足30行的原生JavaScript代码实现 ② 不依赖第三方库 ③ Excel风格的语义分析 (公式以 "=" 开头) ④ 支持任意表达式 (=A1+B2*C3) ⑤ 防止循环引用 ⑥ 基于localStorage的自动本地持久化存储效果展示如下图所示: 代码分析:
统计有多少行JS代码和ASP代码

计算当前文件夹中,有多少行JS代码和ASP代码,并且还可统计代码有多少字节有示例代码复制代码代码如下: <% '\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ '\\ '\\ 来自 codeproject.com '\\ 计算js和asp代码 '\\ 修改 bluedestiny '\\ mail:bluedestiny at 126.com '\\ '\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
一百行JS代码实现一个校验工具

做过校验需求的小伙伴们都知道,校验其实是个麻烦事. 规则多,需要校验的字段多,都给我们前端带来巨大的工作量. 一个不小心,代码里就出现了不少if else等不可维护的代码. 因此,我觉得一个团队或者是一个项目,需要一个校验工具,简化我们的工作. 首先,参考一下 Joi.只看这一小段代码: Joi.string().alphanum().min(3).max(30).required() 我希望我的校验工具Coi也是链式调用,链式调用可以极大的简化代码. 校验呢,其实主要就3个入参:需要校验的数据
20行Python代码实现视频字符化功能

我们经常在B站上看到一些字符鬼畜视频,主要就是将一个视频转换成字符的样子展现出来.看起来是非常高端,但是实际实现起来确是非常简单,我们只需要接触opencv模块,就能很快的实现视频字符化.但是在此之前,我们先看看我们实现的效果是怎样的: 上面就是截取的一部分效果图,下面开始进入我们的主题. 一.OpenCV的安装及图片读取在Python中我们只需要用pip安装即可,我们在控制台执行下列语句: pip install opencv-python 安装完成就可以开始使用.我们先读取一个图片: im
微信小程序12行js代码自己写个滑块功能(推荐)

效果图如下所示 .wxml <view class="jindu" bindtap="cuin"> <view class="xian" style="width:{{towards}}px;"> <view class="yuan" bindtouchmove='touchMove'></view> </view> </view> &
20行Python代码实现一款永久免费PDF编辑工具的实现

PDF(Portable Document Format),中文名称便携文档格式是我们经常会接触到的一种文件格式,文献.文档...很多都是PDF格式.它以格式稳定的优势,使得我们在打印.分享.传输过程中能够最优的保持原有色彩和格式. PDF是以PostScript语言图像模型为基础的一种文档格式,它在格式的稳定性方面虽然具有很大优势.但是,在可编辑性方面却为使用者引入了另外一个困扰. 例如,在文档的分割.合并.剪切.转换.编辑等方面PDF就有些捉襟见肘了. Adobe Reader.福昕阅读器.
只用20行Python代码实现屏幕录制功能

一.模块安装首先,我们需要用到两个python的两个模块,win32gui和PyQt5 1.pip install win32gui 2.pip install PyQt5 1.pip install win32gui PS C:\Users\lex\Desktop> pip install win32gui Looking in indexes: http://mirrors.aliyun.com/pypi/simple Requirement already satisfied: win3

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

相关推荐

随机推荐