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

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. 初识WSGI接口

    WSGI WSGI全称为Web Server Gateway Interface,WSGI允许web框架和web服务器分开,可以混合匹配web服务器和web框架,选择一个适合的配对.比如,可以在Gun ...

  2. http请求之of_ordering_getmiditem

    //Public function of_ordering_getmiditem (string as_instr,string as_key) returns string //string as_ ...

  3. GukiZ and Binary Operations CodeForces - 551D (组合计数)

    大意: 给定$n,k,l,m$, 求有多少个长度为$n$, 元素全部严格小于$2^l$, 且满足 的序列. 刚开始想着暴力枚举当前or和上一个数二进制中$1$的分布, 但这样状态数是$O(64^3)$ ...

  4. .Net面试题四

    1.C#编译成的dll存放在哪个目录?C#程序文件的后缀名是什么?.csproj后缀名是什么文件? 2.请写出C#中常用文件操作类.数据库操作类.网络请求类.每项至少写出三个 3.请定义一个只读属性: ...

  5. BZOJ5017题解SNOI2017炸弹--玄学递推

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=5017 分析 老师讲课谈到了这道题,课上想出了个连边建图然后乱搞的操作,被老师钦定的递推方 ...

  6. Laravel 表单验证创建“表单请求”实现自定义请求类

    按照文档创建表单请求自定义类以后,调用总是403页面,咨询大佬说: public function authorize() { // 在表单验证类的这个方法这里要返回true,默认返回false,这个 ...

  7. 02 Go程序执行流程

    一.把源码编译成二进制后执行 .go代码源文件 => go build => 可执行文件(.exe文件或者linux二进制文件) => 运行结果 二.对源码直接运行 .go源代码文件 ...

  8. 基于光线追踪的渲染中景深(Depth of field)效果的实现

    图形学离线渲染中常用的透视摄像机模型时根据小孔成像的原理建立的,其实现通常是从向成像平面上发射ray,并把trace这条ray的结果作为成像平面上对应交点的采样结果.即: 图片来自<Fundam ...

  9. 使用javascript和jquery获取类方法

    1.本质区别 jquery是一个javascript库.jquery是一个基于javascript语言的框架,本质上就是javascript. 2.代码编写的差异 jquery大大简化了JavaScr ...

  10. Spring自定义标签的实现

    首先 简单写下 spring xml解析的过程 通过一段简单的 调用spring代码开始 public static void main(String[] args) { ApplicationCon ...