位置: 编程技术 - 正文

js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)(js实现复制文本)

编辑:rootadmin

推荐整理分享js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)(js实现复制文本),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js复制dom,js点击按钮复制链接,js实现复制文本,js点击就把内容复制出来,js 点击复制,js 点击复制,js点击就把内容复制出来,js点击就把内容复制出来,内容如对您有帮助,希望把文章链接给更多的朋友!

最近做项目时,在网站框架搭建过程,有一个功能需要实现复制文本到剪贴板,相信这个功能很常用,但是对于不常写JS代码的我来说是一个比较大的挑战,回想以前做过的一个站点,使用window.clipboardData实现复制到剪贴板功能,也仅仅支持IE和FF浏览器,当时在百度找个几个方案,看不下去就放弃了,后来在代码中做了判断,如果不支持该属性,就直接alert:此功能不支持该浏览器,请手工复制文本框中内容。有没有人遇到同样情况?

今天就为大家分享使用复制到剪贴板功能,由于能力有限,有错误的地方还请大家多多指教~

相信很多使用wordpress搭建过站点的同学都知道它采用了jQuery,对jQuery大家并不陌生,使用起来非常简单,可惜jQuery本身并没有实现复制到剪贴板的功能,但或许它的API会有这个功能。这次我搭建的站点采用wordpress,花了点时间搜索jQuery复制到剪贴板的API,还真的有:jQuery ZeroClipboard ,于是使用它在wordpress简单实现了复制到剪贴板的功能。但是呢,jQuery ZeroClipboard原来是有个父亲大人,叫Zero Clipboard。

Zero Clipboard作为一个独立的js库,它利用 Flash 进行复制,需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 。网络上有2个版本,实现原理都是使用flash进行复制,不知道原创是谁的,也可能一家子的2个兄弟,这个就不管了,只要我们自己做到尊重版权,表示问心无愧,今天给大家介绍的这个版本相对来说比较简单。

首先看下图是为使用Zero Clipboard后生成的flash对象,它能兼容的flash及以下版本,兼容所有的浏览器:

Zero Clipboard的官方地址: Clipboard简单实现复制到剪贴板功能,demo如下:

js实现点击复制当前文本到剪贴板功能(兼容所有浏览器)(js实现复制文本)

demo下载 (温馨提示:下载代码的同学,浏览demo时记得使用服务器环境,不然看不到效果的~)

接下来介绍jQuery ZeroClipboard

jQuery ZeroClipboard是在ZeroClipboard的基础上进行的改良,简称zClip,作为jQuery的API,jQuery ZeroClipboard也表现的非常简易操作。

使用前需引用2个js文件:jquery.js和jquery.zclip.js

现在我们使用jquery.zclip.js简单实现复制到剪贴板功能demo如下:

demo下载 (温馨提示:下载代码的同学,浏览demo时记得使用服务器环境,不然看不到效果的~)

上面代码中结合jQuery的操作节点的功能,出色的发挥jquery.zclip.js的作用,如复制前后的操作,动态插入节点,也可见jquery.zclip.js的强大之处,使用起来是非常简单。

从上面独立的js库ZeroClipboard.js和jquery.zclip.js 都是采用flash实现实现复制到剪贴板的功能,可以看出,使用ZeroClipboard.js带来功能相对比较少,不过它是独立的库,文件比较小,而使用jquery.zclip.js后的功能是比较丰富,不过对于不使用jQuery框架的站点来说,采用jquery.zclip.js是比较浪费宽带。

使用哪种复制方式还是具体定位情况,希望本文所述对大家学习javascript程序设计有所帮助。

JS模拟按钮点击功能的方法 本文实例讲述了JS模拟按钮点击功能的方法。分享给大家供大家参考,具体如下:htmlheadtitleusuallyfunction/title/headscriptfunctionload(){//下面两种方法效果是一

点评js异步加载的4种方式 js异步加载的4种方式,点评开始。方案1:$(document).ready!DOCTYPEhtmlhtmlheadscriptsrc="

JS设置下拉列表框当前所选值的方法 本文实例讲述了JS设置下拉列表框当前所选值的方法。分享给大家供大家参考,具体如下:1.JS代码:functionsetSelectOption(objId,targetValue){//objid:下拉列表框

标签: js实现复制文本

本文链接地址:https://www.jiuchutong.com/biancheng/386346.html 转载请保留说明!

上一篇:jquery插件jquery.confirm弹出确认消息(jQuery插件安装教程)

下一篇:JS模拟按钮点击功能的方法(js模拟点击alert()确定)

  • 一般纳税人缴纳税金分录
  • 个人开票的抬头怎么写
  • 小规模纳税人可以开13%的发票吗
  • 必须一般纳税人
  • 应收账款占用资金的应计利息公式
  • 固定资产加速折旧法
  • 会议收入包括哪些
  • 成本法下的后续计量
  • 房产公司办公室布局
  • 经营租赁发生改良费用的会计分录如何处理?
  • 资产负债表货币资金与现金流量表的关系
  • 银行汇兑计入哪个会计科目?
  • 开具出口发票时免税类型怎么选择?
  • 贸易公司收到货款会计分录
  • 利润分配的余额
  • 广告公司的收入增加原因
  • 药品入库和出库必须执行什么制度
  • 视同销售有哪些?
  • 或有事项的计量结束语
  • 建筑业预缴企业所得税税率是多少
  • ThinkPHP让../Public在模板不解析(直接输出)的方法 原创
  • 网页读出来
  • 华为鸿蒙系统支持苹果手表吗
  • 劳务费支出计入什么科目?
  • php获取并显示用户的用户名
  • ci框架api版本
  • php数组函数面试题
  • 增值税代扣代缴税率是多少
  • 微信支付开发需要什么条件
  • react.fc
  • High-resolution image reconstruction with latent diffusion models from human brain activity
  • 注意力机制加在什么位置
  • 文件上传模板怎么弄
  • php使用ajax
  • 车船税每年都要付吗
  • 购买方红字信息表已开销售方系统查不到
  • 年终奖要计入工资吗
  • 租赁业务成本
  • 以前年度应交税费调账
  • 财务报表季报利润表本月金额怎么填
  • 公司基本户可以异地开户吗
  • python统计出现次数并排序
  • 股东投钱一般怎么投
  • 企业会计准则无形资产土地摊销
  • 印花税购销合同计税依据
  • 土地增值税采用
  • 购入的设备用于研发怎样记账
  • 存货跌价准备确认
  • 专用发票和普通发票 报销
  • 购进固定资产的账务处理
  • 购买理财产品如何防诈骗
  • 新会计准则印花税需要计提吗
  • 固定资产变动方式对应科目
  • 公司库存现金如何存回银行
  • 抵货款怎么做账
  • 公司给员工租房没有发票怎么入账
  • 小规模一季度不超过30万是不含税吗
  • 职工薪酬的范围及内容
  • sql语句训练题及答案
  • win8系统怎么安装office
  • win7怎样关闭u盘保护功能
  • linux 系统监控
  • centos如何安装软件
  • win7如何设置多个显示器
  • NJeeves.exe - NJeeves进程文件是什么意思 有什么用
  • win10自定义你的设备有什么用
  • win7虚拟内存最大设置多少
  • 在Linux系统中安装pacman
  • win7提示计算机内存不足
  • linux就该这么些
  • 升级win10系统后无法联网的三种解决方法
  • Jquery ajax基础教程
  • css英文代码翻译
  • css样式表可以兼容所有浏览器吗
  • html头像代码
  • 三角进攻怎么打
  • javascript怎么学
  • 河南医疗保险网上怎么缴费截止时间
  • 电子税务局 安徽
  • 广东省电子税务局官网登录入口
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设