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 ...
随机推荐
- pytest参数化的两种方式
1.传统方式 import requests,pytest from Learning.variable import * # 定义变量 #url = "https://www.baidu. ...
- Spring实战(十三)Spring事务
1.什么是事务(Transaction)? 事务是指逻辑上的一组操作,要么全部成功,要么全部失败. 事务是指将一系列数据操作捆绑成为一个整体进行统一管理.如果某一事务执行成功,则该事务中进行的所有数据 ...
- C#实现鼠标滚筒缩放界面的效果
elementCanvas继承UserControl 声明属性: #region 缩放属性添加 float ratio = 1.0f; public float Ratio { set { ratio ...
- Makefile速查笔记
Makefile速查笔记 Makefile中的几个调试方法 一. 使用 info/warning/error 增加调试信息 a. $(info "some text")打印 &qu ...
- 三、maven学习-高级
maven父子工程
- PS 中混合模式
1.正常模式 2. 溶解 3. 变暗 : 把两幅图中较暗的区域显示出来 4.正片叠底 总体变暗,把图层中较浅的颜色由下一图层较深的颜色显现(和滤色相反) 7. 深色 取较小的颜色 8. ...
- ftp卡死问题
最近用org.apache.commons.net.ftp.FTPClient 写ftp的上传下载的定时任务 发现有时候线程会卡住,也不报错就一直不工作了,后来发现需要使用ftp的被动模式才行,实现 ...
- mybatis报错,There is no getter for property named 'templateName' in 'class
There is no getter for property named 'templateName' in 'class 主要原因是因为mapper.xml 的语句有错误,导致在bean里找不到相 ...
- Troubleshooting: Cannot Run on an Android Device
同事在他的开发环境中,在IDE中直接在手机上运行Android项目,结果出现这个错误,无法在手机上安装. 产生这个问题的原因,一般就是签名不对,这种情况,删除手机上装过的同名应用,就可以解决.当然,你 ...
- 第五章· MySQL数据类型
一.数据类型介绍 1.四种主要类别  1)数值类型 2)字符类型 3)时间类型 4)二进制类型 2.数据类型的 ABC 要素 1)Appropriate(适当) 2)Brief(简洁) 3)Comp ...