js复制到剪贴板html5,移动端web 复制到剪贴板怎么实现？

我最近也遇到类似需求，我用的是： Clipboard.js

Clipboard.js为开发者提供了一个集成了实用的API的多功能轻量级JavaScript库，不依赖Flash

兼容性：

虽然要求Safari版本在10以上，但是作者做了很好的优雅降级：

The good news is that clipboard.js gracefully degrades if you need to support older browsers. All you have to do is show a tooltip saying Copied! when success event is called and Press Ctrl+C to copy when error event is called because the text is already selected.

也就是说，Safari版本是10以上的，可以直接成功复制；如果是版本小于10，可以通过如下代码提示用户手动复制：

clipboard.on('error', function(e) {

alert('请选择“拷贝”进行复制!')

});

Safari版本在10以下的效果：

DEMO：

html

复制

javascript

//init

var clipboard = new Clipboard('.btn');

//优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制

clipboard.on('success', function(e) {

alert('复制成功!')

e.clearSelection();

});

clipboard.on('error', function(e) {

alert('请选择“拷贝”进行复制!')

});

js复制到剪贴板html5,移动端web 复制到剪贴板怎么实现？相关推荐

unity Android 剪贴板,Unity移动端的复制要这么写示例代码
前言 Unity官网提供了详尽的文档和丰富的教学视频,昨天跟着视频做了一个简单的3d游戏"roll-a-ball".游戏涉及了许多Unity的基本知识,用来入门很不错. 本文主要给 ...
HTML5与移动端web学习笔记
概述 HTML5 提供了很多新的功能,主要有: 全选复制放进笔记新的 HTML 元素,例如 section, nav, header, footer, article 等用于绘画的 Canvas ...
html5移动端点击复制,H5实现移动端复制文字功能
前言移动端项目开发中,经常遇到需要复制文字的场景,今天咱们就来聊一下,移动端复制文字的那些事~ 效果预览背景分析业务需求很简单,将指定的文字(例如: 关键字.文案描述等)复制到手机的剪贴板上,方 ...
html 手机复制到剪贴板,移动端和pc端的复制到剪贴板功能
一.Document.execCommand() 1.移动端复制 html结构礼包码: 复制 js代码 if(!isPC){ $('.helper-box').on('click','.gift-c ...
HTML5期末大作业：XXX 网站设计——指环王：护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规
HTML5期末大作业:XXX 网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划 ...
清除浏览器缓存之后为什么还是显示旧的html页面_H5缓存机制浅析-移动端Web加载性能优化...
1 H5缓存机制介绍 H5,即HTML5,是新一代的HTML标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5引入的离线存储,这意味着 web 应用可进行缓存,并可在没 ...
python移动端web开发代码_移动web前端开发,前端开发工作总结,移动端页面开发-我主页-一个前端程序猿的博客...
热门推荐 html/css 一.escape和它们不是同一类简单来说,escape是对字符串(string)进行编码(而另外两种是对URL),作用是让它们在所有电脑上可读.编码之后的... 标签: 0 ...
html5 移动端单页面布局
序移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...
视频教程-移动端Web开发-JavaScript
移动端Web开发 TriAquae开源运维软件创始人,混迹IT运维领域多年,曾就职于松下.国政通.飞信.中金.NOKIA等公司,维护过少至几十台,多至数万台设备的IT系统,致力于提高企业运维自动化水平 ...
20.【移动端Web开发之响应式布局】
文章目录 [移动端Web开发之响应式布局]前端小抄(20) 一.响应式开发 1.1 响应式开发原理 1.2 响应式布局容器二.Bootstrap前端开发框架 2.1 Bootstrap简介 2.2 ...

js复制到剪贴板html5,移动端web 复制到剪贴板怎么实现？

js复制到剪贴板html5,移动端web 复制到剪贴板怎么实现？相关推荐

最新文章

热门文章

js复制到剪贴板html5,移动端web 复制到剪贴板 怎么实现？

js复制到剪贴板html5,移动端web 复制到剪贴板 怎么实现？相关推荐

最新文章

热门文章

js复制到剪贴板html5,移动端web 复制到剪贴板怎么实现？

js复制到剪贴板html5,移动端web 复制到剪贴板怎么实现？相关推荐