JavaScript复制内容到剪贴板
移动端 需要复制内容到剪贴板时,
clipborad.js 不支持ios微信版浏览器,可配合使用 execCommand 使其兼容,
完成一键复制淘口令的功能。
注意使用clipborad.js时,input 元素不可隐藏,可以设置元素位置在可视区域之外。
参考链接:
https://github.com/axuebin/articles/issues/26
实现代码:
<input id="taokouling" value="€1222€">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#taokouling" >复制淘口令</button>
document.querySelector('.btn').addEventListener('click', () => { var clipboard = new Clipboard('.btn');
clipboard.on('success', e => {
// alert(e.text)
$(".pop").fadeIn(500)
e.clearSelection();
})
clipboard.on('error', e => {
// 不支持复制
// alert('浏览器不支持自动复制,请手动复制微信号') var btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
var input = document.createElement('input');
input.setAttribute('readonly', 'readonly');
input.setAttribute('value', '€Up2jba6wlck€');
document.body.appendChild(input);
input.setSelectionRange(0, 9999);
if (document.execCommand('copy')) {
document.execCommand('copy');
$(".pop").fadeIn(500)
}
else{
alert('复制失败');
}
document.body.removeChild(input);
})
})
})
JavaScript复制内容到剪贴板的更多相关文章
- Javascript复制内容到剪贴板,解决navigator.clipboard Cannot read property 'writeText' of undefined
起因 最近帮同事实现了一个小功能--复制文本到剪贴板,主要参考了前端大神阮一峰的博客,根据 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文 ...
- JavaScript 复制内容到剪贴板
<html> <head> <title>Selector</title> <script language="javascript&q ...
- JavaScript复制内容到剪贴板 clipboard.js
参考链接: https://github.com/axuebin/articles/issues/26#issuecomment-466337929
- 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》
前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...
- Zclip点击复制内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- 使用clipboard.js实现复制内容至剪贴板
下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...
- javascript复制内容到剪切板/网页上的复制按钮的实现
javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...
随机推荐
- python基础学习日记(一)注释(二)算术运算符(三)变量的基本使用
一.python程序的注释 注释部份程序运行时不起作用.用于说明代码的用途 1.单行注释 # 开始的一行文字,为单行注释 # 单行注释 print("hello python") ...
- 关于KMP中求next数组的思考【转】
文章转自 http://www.tuicool.com/articles/yayeIbe.这是我看到关于求next数组,解释最好的一篇文章!!!!!!! KMP的next数组求法是很不容易搞清楚的一部 ...
- 输出单项链表中倒数第k个结点——牛客刷题
题目描述: 输入一个单向链表,输出该链表中倒数第k个结点 输入.输出描述: 输入说明:1.链表结点个数 2.链表结点的值3.输入k的值 输出说明:第k个结点指针 题目分析: 假设链表长度为n,倒数第k ...
- Java 注解(原理及其使用)
一.注解(annotation)介绍 Java在JDK5中引入源代码的注解机制. 1.什么是注解? 注解为代码添加了元数据,元数据是关于数据的组织.数据域及其关系的说明信息. 更通俗的说,注解为程序元 ...
- pg_ctl — 启动、停止、重启 PostgreSQL
pg_ctl 名称 pg_ctl -- 启动.停止.重启 PostgreSQL 语法 pg_ctl start [-w] [-s] [-D datadir] [-l filename] [-o opt ...
- Python学习笔记:利用爬虫自动保存图片
兴趣才是第一生产驱动力. Part 1 起先,源于对某些网站图片浏览只能一张一张的翻页,心生不满.某夜,冒出一个想法,为什么我不能利用爬虫技术把想看的图片给爬下来,然后在本地看个够. 由此经过一番初尝 ...
- vue进阶:vuex(数据池)
非父子组件传值 vuex 一.非父子组件传值 基于父子组件通信与传值实现非父子组件传值的示例关键代码: <template> <div> <!-- 学员展示 --> ...
- Caffe测试单独的算子
最近有一个需求是测试单独算子在CPU.Caffe使用的GPU.cuDNN上的性能,一个是使用caffe的time问题,还有一个是使用单独的test功能. time选项的使用,大家都比较熟悉,单独的te ...
- 关于SQL查询某年数据 和DATEPART 函数的使用
数据库查询某年数据(sql server)select *from 表名 where YEAR(存时间的字段名) =某年select *from News where YEAR(addDate) =2 ...
- redis-cluster集群总结
Redis集群搭建 要想搭建一个最简单的Redis集群,那么至少需要6个节点:3个Master和3个Slave.为什么需要3个Master呢?如果你了解过Hadoop/Storm/Zookeeper这 ...