0

0

clipboard.js用html页面复制信息到剪切板

巴扎黑

巴扎黑

发布时间:2017-07-18 17:00:04

|

3301人浏览过

|

来源于php中文网

原创

最近在做一个的智能客服web端浏览器应用,其中有一项需求是客户在获取系统返回的

答案后点击“复制答案”按钮将答案复制到系统剪切板。本以为这是一个小case,但是发现如果

要对各种主流浏览器都有良好的兼容性并不简单。原因在于出于安全原因,大多数现代浏览

器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用)。

 

立即学习前端免费学习笔记(深入)”;

  上网搜索了一下,现有的方案大致有两种:

  一:使用原生javascript中window.clipboardData实现复制到剪贴板功能;

  二:使用Zero Clipboard库;

 

立即学习前端免费学习笔记(深入)”;

  在尝试了之后发现现有的方案都不能满足需求。

方案一仅仅支持ie浏览器,在firefox,chrome浏览器上则不起作用。

方案二则是现有绝大多数网站(包括github等)所采取的方案,ZeroClipboard是国外大神开发的一个

用于剪贴板复制的 JS 插件,它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard

的时候,它会悄悄隐藏一个小小的 Flash 影片(swf),不会对我们的用户界面造成影响。我们只需要借助

它实现复制功能就行了。

  ZeroClipboard 中的 "Zero" 指的就是"不可见,零干扰"。

  对此感兴趣的可以参考 http://my.oschina.net/shniu/blog/298406?p=1

 

立即学习前端免费学习笔记(深入)”;

  但是在现代浏览器中,flash逐渐没落,firefox浏览器默认不开启flash,所以Zero Clipboard在

兼容方面也表现不佳。

讯飞绘文
讯飞绘文

讯飞绘文:免费AI写作/AI生成文章

下载

 

立即学习前端免费学习笔记(深入)”;

  那么,对于复制到剪切板这种简单的操作有没有一种实现简单,兼容性良好的解决方案呢?有的!那就是github

上的开源项目clipboard.js(官网:http://zenorocha.github.io/clipboard.js/) 官网对于clipboard.js的介绍

非常简单:

  A modern approach to copy text to clipboard No Flash. No dependencies. Just 3kb gzipped

  Copying text to the clipboard shouldn't be hard. It shouldn't require dozens of steps to configure

or hundreds of KBs to load. But most of all, it shouldn't depend on Flash or any bloated framework.

That's why clipboard.js exists.(拷贝文本到剪切板不应该复杂,它不应该需要许多步骤以及几百KB的文件,另

外,它不应该依靠flash以及其他框架,这就是clipboard存在的原因)

下载路径:

应用:

data-clipboard-target attribute 对应需要Copy的html. 可以携带页面的样式,如果保存word。 txt 则无。

样例如下:





data-clipboard-action attribute 用于区别 copy or cut content。





 

you may expect, the cut action only works on or

data-clipboard-text attribute 用于纯文本copy.


  

 

立即学习前端免费学习笔记(深入)”;

clipboard.js用html页面复制信息到剪切板

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法
MC.JS网页版快速畅玩指南_MC.JS官网在线入口及免安装体验方法

本专题汇总了MC.JS官网入口和网页版快速畅玩方法,提供免安装访问、不同版本(1.8.8、1.12.8)在线体验指南,以及正版网页端操作说明,帮助玩家轻松进入MC.JS世界,实现即时畅玩与高效体验。

0

2026.02.10

谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程
谷歌邮箱网页版登录与注册全指南_Gmail账号快速访问与安全操作教程

本专题汇总了谷歌邮箱网页版的最新登录入口和注册方法,详细提供官方账号快速访问方式、网页版操作教程及安全登录技巧,帮助用户轻松管理Gmail邮箱账户,实现高效、安全的邮箱使用体验。

0

2026.02.10

铁路12306订票与退改全攻略_高效购票与座位选取技巧
铁路12306订票与退改全攻略_高效购票与座位选取技巧

本专题全面汇总铁路12306订票、退票、改签及候补订单操作技巧,提供车厢座位分布参考、抢票攻略和高铁安检注意事项,帮助新手用户快速掌握高效购票与退改流程,提高出行效率和体验。

0

2026.02.10

TensorFlow2深度学习模型实战与优化
TensorFlow2深度学习模型实战与优化

本专题面向 AI 与数据科学开发者,系统讲解 TensorFlow 2 框架下深度学习模型的构建、训练、调优与部署。内容包括神经网络基础、卷积神经网络、循环神经网络、优化算法及模型性能提升技巧。通过实战项目演示,帮助开发者掌握从模型设计到上线的完整流程。

0

2026.02.10

Vue3组合式API与组件开发实战
Vue3组合式API与组件开发实战

本专题讲解 Vue 3 组合式 API 的核心概念与应用技巧,深入分析响应式系统、生命周期管理、组件设计与复用策略。通过完整项目案例,指导前端开发者实现高性能、结构清晰的 Vue 应用,提升开发效率与代码可维护性。

2

2026.02.10

Go语言微服务架构与gRPC实战
Go语言微服务架构与gRPC实战

本专题面向有 Go 基础的开发者,系统讲解微服务架构设计与 gRPC 的高效应用。内容涵盖服务拆分、RPC 通信、负载均衡、错误处理、服务注册与发现等关键技术。通过实战案例,帮助开发者搭建高性能、可扩展的 Go 微服务系统。

1

2026.02.10

React 18状态管理与Hooks高级实践
React 18状态管理与Hooks高级实践

本专题专注于 React 18 的高级开发技术,详细讲解 useState、useEffect、useReducer、useContext 等 Hooks 的使用技巧,以及 Redux、Zustand 等状态管理工具的集成与优化方法。通过真实案例,帮助前端开发者构建可维护、性能优良的现代 React 应用。

4

2026.02.10

Node.js后端开发与Express框架实践
Node.js后端开发与Express框架实践

本专题针对初中级 Node.js 开发者,系统讲解如何使用 Express 框架搭建高性能后端服务。内容包括路由设计、中间件开发、数据库集成、API 安全与异常处理,以及 RESTful API 的设计与优化。通过实际项目演示,帮助开发者快速掌握 Node.js 后端开发流程。

1

2026.02.10

Java 并发编程与线程池实战
Java 并发编程与线程池实战

本专题面向中级 Java 开发者,深入讲解 Java 并发编程基础、线程创建、线程安全、锁机制及线程池使用。通过实战案例演示如何使用不同类型的线程池优化应用性能、管理并发任务,并结合高并发场景提供优化策略和最佳实践,帮助开发者提升 Java 并发处理能力。

0

2026.02.10

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号