基于js实现复制内容到操作系统粘贴板过程解析

一、如果只考虑IE浏览器，可以直接用原声js实现(兼容IE、谷歌、火狐等浏览器)

if(window.clipboardData){
  //清空操作系统粘贴板
  window.clipboardData.clearData();
  //将需要复制的内容复制到操作系统粘贴板
  window.clipboardData.setData("Text", "要复制的内容");
}

二、如果是其他浏览器，上面的办法行不通，其他浏览器出于安全的考虑禁止js访问操作系统粘贴板。

这里需要用到插件，网上流行的插件有两种，一种是ZeroClipboard.js，一种是clipboard.js。

插件下载地址：https://zenorocha.github.io

1.用ZeroClipboard.js插件需要用到以下三个文件：

  • ZeroClipboard.js
  • ZeroClipboard.min.js
  • ZeroClipboard.swf

这个插件需要浏览器的flash控件支持，复制时先把内容复制到flash里面，再利用flash将内容复制到

操作系统。flash控件又被淘汰的可能，有些浏览器上兼容得也不太好，所以这个插件不太好用。

2.用clipboard.js插件需要用到以下一个文件：

clipboard.min.js

执行复制功能的html标签上需要加上一个属性和一个样式，属性data-clipboard-text的值表示要复制的内容，

样式js-copy表示该标签被绑定上点击复制的功能，在点击该标签时触发复制功能。

该插件兼容IE、谷歌、火狐等浏览器。

js示例代码如下：

$("span").each(function(index,element){if(element.innerHTML=="复制")new Clipboard($(element).parent().attr("data-clipboard-text",Ext.fly(html).dom.innerText).addClass("js-copy")[0]);});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • clipboard.js在移动端复制失败的解决方法

    clipboard.js在移动端复制失败的解决方法

    1.前沿 一句话介绍下clipboard.js:实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能. 在项目中使用clipboard.js插件去实现点击按钮,复制一段网址到剪切板的功能.功能做好后,一开始无论这pc端还是移动端都能正常使用.突然某一天测出了一个bug:移动端复制失败,pc端是ok的.简直一脸懵逼... 遇到这个bug,我第一个思考到的是,这是个常用的插件,网上应该有现成的解决方法.网友分享的方法是:把绑定data-clipboard-target

  • JS常见DOM节点操作示例【创建 ，插入，删除，复制，查找】

    本文实例讲述了JS常见DOM节点操作.分享给大家供大家参考,具体如下: DOM含义:DOM是文档对象模型(Document Object Model,是基于浏览器编程的一套API接口,是W3C出台的推荐标准.其赋予了JS操作节点的能力.当网页被加载时,浏览器就会创建页面的文档对象模型. 节点:根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 1.整个文档时一个文档节点. 2.每个HTML元素是元素节点. 3.HTML元素内的文本是文本节点. 4.每个HTML属性是属

  • JavaScript实现复制内容到粘贴板代码

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

  • jQuery实现简单复制json对象和json对象集合操作示例

    jQuery实现简单复制json对象和json对象集合操作示例

    本文实例讲述了jQuery实现简单复制json对象和json对象集合操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>www.jb51.net jQuery复制json</title> <script src="

  • js实现点击按钮复制文本功能

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理分析 浏览器提供了 copy 命令 ,可以复制选中的内容 document.execCommand("copy") 如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板 但是 select() 方法只对 <input>

  • JS插件clipboard.js实现一键复制粘贴功能

    JS插件clipboard.js实现一键复制粘贴功能

    一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js. 官网地址 下载到本地后,将其放入项目中,直接引用即可.具体实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一键复制粘贴</title> <style> .transfer { width: 90%; margin: 20px auto; fon

  • JavaScript复制内容到剪贴板的两种常用方法

    常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的. clipboard.js 这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单. 引用 直接引用: <script src="dist/clipboard.min.js"></script> 包: npm install

  • react.js组件实现拖拽复制和可排序的示例代码

    在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计. 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性. 拖拽复制的效果如下: 由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在"拖拽释放"的时候,将被拖拽方的数据放到当前目标所在的value数组中

  • 基于js实现复制内容到操作系统粘贴板过程解析

    一.如果只考虑IE浏览器,可以直接用原声js实现(兼容IE.谷歌.火狐等浏览器) if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将需要复制的内容复制到操作系统粘贴板 window.clipboardData.setData("Text", "要复制的内容"); } 二.如果是其他浏览器,上面的办法行不通,其他浏览器出于安全的考虑禁止js访问操作系统粘贴板. 这里需要

  • JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)

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

  • 基于Java创建XML（无中文乱码）过程解析

    基于Java创建XML（无中文乱码）过程解析

    这篇文章主要介绍了基于Java创建XML(无中文乱码)过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 package com.zyb.xml; import java.io.FileOutputStream; import java.io.OutputStream; import java.io.OutputStreamWriter; import java.io.Writer; import org.dom4j.Document; i

  • 基于Python实现ComicReaper漫画自动爬取脚本过程解析

    基于Python实现ComicReaper漫画自动爬取脚本过程解析

    这篇文章主要介绍了基于Python实现ComicReaper漫画自动爬取脚本过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 讲真的, 手机看漫画翻页总是会手残碰到页面上的广告好吧... 要是能只需要指定一本漫画的主页URL就能给我返回整本漫画就好了... 这促使我产生了使用Python 3来实现, 做一个 ComicReaper(漫画收割者) 的想法! 本文所用漫画链接 : http://www.manhuadb.com/manhua/

  • JS实现复制内容到剪贴板功能

    JS实现复制内容到剪贴板功能

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroClipboard.js). ZeroClipboard.js在Git上的地址为:https://github.com/zeroclipboard/zeroclipboard 注意:此js库不支持兼容手机端(包括Android.IOS),仅支持PC端浏览器. 第一步:将插件库引入到工程中. 把Git上

  • React.js组件实现拖拽排序组件功能过程解析

    因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使

  • JS组件库AlloyTouch实现图片轮播过程解析

    轮播图也涉及到触摸和触摸反馈,同时,AlloyTouch可以把惯性运动打开或者关闭,并且设置min和max为运动区域,超出会自动回弹. 除了一般的竖向滚动,AlloyTouch也可以支持横向滚动,甚至任何属性的运动,因为它的设计的本质就是属性无关,触摸可以反馈到任何属性的运动.所以AlloyTouch制作各种各样的轮播组件还是得心应手. 第一种轮播图如上图所示.下面开始实现的过程. 第0秒 <div id="carousel-container"> <div clas

  • 基于Python实现大文件分割和命名脚本过程解析

    日志文件分割.命名 工作中经常会收到测试同学.客户同学提供的日志文件,其中不乏几百M一G的也都有,毕竟压测一晚上产生的日志量还是很可观的,xDxD,因此不可避免的需要对日志进行分割,通常定位问题需要针对时间点,因此最好对分割后的日志文件使用文件中日志的开始.结束时间点来命名,这样使用起来最为直观,下面给大家分享两个脚本,分别作分割.命名,希望能够给大家提供一点点帮助: 大文件分割 用法: python split_big_file.py 输入文件全路径名 输入期望的分割后每个小文件的行数 Jus

  • 基于python的BP神经网络及异或实现过程解析

    基于python的BP神经网络及异或实现过程解析

    BP神经网络是最简单的神经网络模型了,三层能够模拟非线性函数效果. 难点: 如何确定初始化参数? 如何确定隐含层节点数量? 迭代多少次?如何更快收敛? 如何获得全局最优解? ''' neural networks created on 2019.9.24 author: vince ''' import math import logging import numpy import random import matplotlib.pyplot as plt ''' neural network

  • 基于Python爬取51cto博客页面信息过程解析

    介绍 提到爬虫,互联网的朋友应该都不陌生,现在使用Python爬取网站数据是非常常见的手段,好多朋友都是爬取豆瓣信息为案例,我不想重复,就使用了爬取51cto博客网站信息为案例,这里以我的博客页面为教程,编写的Python代码! 实验环境 1.安装Python 3.7 2.安装requests, bs4模块 实验步骤 1.安装Python3.7环境 2.安装requests,bs4 模块 打开cmd,输入:pip install requests -i https://pypi.tuna.tsi

随机推荐