移动端 需要复制内容到剪贴板时,

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复制内容到剪贴板的更多相关文章

  1. Javascript复制内容到剪贴板,解决navigator.clipboard Cannot read property 'writeText' of undefined

    起因 最近帮同事实现了一个小功能--复制文本到剪贴板,主要参考了前端大神阮一峰的博客,根据 navigator.clipboard 返回的 Clipboard 对象的方法 writeText() 写文 ...

  2. JavaScript 复制内容到剪贴板

    <html> <head> <title>Selector</title> <script language="javascript&q ...

  3. JavaScript复制内容到剪贴板 clipboard.js

    参考链接: https://github.com/axuebin/articles/issues/26#issuecomment-466337929

  4. 《JS实现复制内容到剪贴板功能,可兼容所有PC浏览器,不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  5. JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)

    现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...

  6. JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】

    正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...

  7. Zclip点击复制内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

  8. 使用clipboard.js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

  9. javascript复制内容到剪切板/网页上的复制按钮的实现

    javascript复制内容到剪切板/网页上的复制按钮的实现:DEMO如下 <!doctype html> <html> <head> <meta chars ...

随机推荐

  1. pytest参数化的两种方式

    1.传统方式 import requests,pytest from Learning.variable import * # 定义变量 #url = "https://www.baidu. ...

  2. Spring实战(十三)Spring事务

    1.什么是事务(Transaction)? 事务是指逻辑上的一组操作,要么全部成功,要么全部失败. 事务是指将一系列数据操作捆绑成为一个整体进行统一管理.如果某一事务执行成功,则该事务中进行的所有数据 ...

  3. C#实现鼠标滚筒缩放界面的效果

    elementCanvas继承UserControl 声明属性: #region 缩放属性添加 float ratio = 1.0f; public float Ratio { set { ratio ...

  4. Makefile速查笔记

    Makefile速查笔记 Makefile中的几个调试方法 一. 使用 info/warning/error 增加调试信息 a. $(info "some text")打印 &qu ...

  5. 三、maven学习-高级

    maven父子工程

  6. PS 中混合模式

    1.正常模式 2. 溶解 3. 变暗    :  把两幅图中较暗的区域显示出来 4.正片叠底   总体变暗,把图层中较浅的颜色由下一图层较深的颜色显现(和滤色相反) 7. 深色  取较小的颜色 8. ...

  7. ftp卡死问题

    最近用org.apache.commons.net.ftp.FTPClient  写ftp的上传下载的定时任务 发现有时候线程会卡住,也不报错就一直不工作了,后来发现需要使用ftp的被动模式才行,实现 ...

  8. mybatis报错,There is no getter for property named 'templateName' in 'class

    There is no getter for property named 'templateName' in 'class 主要原因是因为mapper.xml 的语句有错误,导致在bean里找不到相 ...

  9. Troubleshooting: Cannot Run on an Android Device

    同事在他的开发环境中,在IDE中直接在手机上运行Android项目,结果出现这个错误,无法在手机上安装. 产生这个问题的原因,一般就是签名不对,这种情况,删除手机上装过的同名应用,就可以解决.当然,你 ...

  10. 第五章· MySQL数据类型

    一.数据类型介绍 1.四种主要类别  1)数值类型 2)字符类型 3)时间类型 4)二进制类型 2.数据类型的 ABC 要素 1)Appropriate(适当) 2)Brief(简洁) 3)Comp ...