copyToClipboard - 复制到剪贴板advanced

将一个字符串复制到剪贴板。 仅作为用户操作的结果(即,在 click 事件侦听器中)。

创建一个新的 <textarea> 元素,用提供的数据填充它,并将其添加到 HTML 文档中。 使用 Selection.getRangeAt() 来存储选择的范围(如果有的话)。 使用 document.execCommand(‘copy‘) 复制到剪贴板。 从HTML文档中删除 <textarea> 元素。 最后,使用 Selection().addRange() 来恢复原始选择范围(如果有的话)。

const copyToClipboard = str => {
  const el = document.createElement(‘textarea‘);
  el.value = str;
  el.setAttribute(‘readonly‘, ‘‘);
  el.style.position = ‘absolute‘;
  el.style.left = ‘-9999px‘;
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
  el.select();
  document.execCommand(‘copy‘);
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};

查看示例

copyToClipboard(‘Lorem ipsum‘); // ‘Lorem ipsum‘ copied to clipboard.

原文地址:https://www.cnblogs.com/bali123/p/8311480.html

时间: 2024-11-07 07:37:11

copyToClipboard - 复制到剪贴板advanced的相关文章

js 将内容复制到剪贴板

js 将内容复制到剪贴板 CreationTime--2018年7月1日15点06分 Author:Marydon function copyToClipboard(txt) { if(window.clipboardData){ // 清空剪贴板 window.clipboardData.clearData(); // 赋值 window.clipboardData.setData("Text", txt); alert('复制成功!') }else{ alert('请手动复制!')

使用JavaScript读取所选文本并将其复制到剪贴板

询问大多数开发人员如何将用户选择的内容复制到剪贴板,他们会提到Flash的需求(因此Zeroclipboard等脚本的流行 ).然而,这种想法的调整现在归功于最近浏览器对JavaScript中关键技术的支持的改进,这使得复制到剪贴板本身成为可能.这种JavaScript方法在IE9 +,Firefox 41+和Chrome 42+中得到支持,最终为浏览器本身带来了原生剪切/复制支持.在本教程中,我们将看到如何阅读用户选择的文本内容,动态选择页面上的一些文本,最后但并非最不重要的是,将所选内容复制

使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板. Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中. 然后把在你要使用复制功能的页面中引入Zero

jQuery ZeroClipboard 复制到剪贴板功能,兼容所有浏览器

<!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/jav

黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

JS实现复制到剪贴板

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>复制到剪贴板</title> <script src="http://img3

js插件zClip实现复制到剪贴板功能

之前在一个项目中用过插件,但是最近又要做,发现,出现问题了,根据以往记忆做好,检查了所有问题,还是不出现,元素是绑定了zclip_type这个事件,就是弹出不显示,想了下,查看html结构元素一看,问题发现,覆盖的层定位有问题.相对body定位了,没有相对td定位. 一,准备工作. 准备好jquery,然后去http://www.steamdev.com/zclip/这里下载jquery.zclip.js和ZeroClipboard.swf ,不过那里的ZeroClipboard.swf下载地址

ZeroClipboard 复制到剪贴板

使用 ZeroClipboard 可以简单的将内容复制到剪贴板,通过 Adobe Flash 和 JavaScript 来实现.“Zero” 意义为这个类库没有界面,界面需要由你来建立. 版本: ZeroClipboard v2.1.6 github地址 在线实例 实例预览 ZeroClipboard 复制到剪贴板 简单示例 使用方法 载入 JavaScript 文件 <script src="ZeroClipboard.js"></script> 复制 如果

Android 复制 粘贴 剪贴板的使用 ClipboardManager

Copy and Paste 版本:Android 4.0 r1 快速查看 用于复制粘贴数据的基于剪贴板的框架. 同时支持简单和复杂的数据,包括文本串.复杂的数据结构.文本和二进制流数据.程序 asset. 直接从剪贴板复制粘贴简单文本. 用content provider复制粘贴复杂数据. 需要API 11版本. 在本文中 剪贴板框架 剪贴板类 ClipboardManager ClipData.ClipDescription和ClipData.Item ClipData常用方法 将剪贴板中数