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

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. http请求之of_ordering_getmiditem

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

  2. 作业5:Java编译原理

    零.编译 1.编译器 (1)前端编译器:.java文件转变为.class文件Sun的javacEclipse JDT中的增量编译器(ECJ) (2)后端编译器:.class文件转变为机器码HotSpo ...

  3. Eclipse怎么改变@author 姓名

    1 点击windows  然后选择 点击进去选择搜索code Templates  点击选择出现下面的页面 点开comments,里面有给方法,变量 ,类等加注释设置的模板 如:点击Methods  ...

  4. go语言中获取变量类型的三种方法

    package main import ( "fmt" "reflect" ) func main() { var num float64 = 3.14 // ...

  5. vue2.0+按需引入element-ui报错

    项目使用vue脚手架自动生成的,vue版本为^2.5.16.项目中需要按需使用element-ui,根据element-ui的官方文档,一开始在babel.config.js文件中修改配置 modul ...

  6. 对MySQL索引、锁及事务的简单分析

    一.索引的数据结构 1.二叉搜索树实现的索引 二叉搜索树如下图,它查找元素的时间复杂度为O(logn) 但如果经常出现增删操作,最后导致二叉搜索树变成线性的二叉树,这样它查找元素的时间复杂度就会变成O ...

  7. 网络基础篇之HDLC、PPP(原理)

    一.广域网传输 之前讲解的都是关于局域网的数据传输,这次讲解的是广域网的传输. 广域网简称WAN,是一种跨越超大的.地域性的计算机网络集合.通常跨省.市.甚至一个国家.广域网包括很多子网,子网可以是局 ...

  8. shell脚本基础和grep文本处理工具企业应用3

    文本处理工具:    linux上文本处理三剑客        grep,egrep,fgrep:文本过滤工具(模式:pattern)工具            grep:默认支持的是基本正则表达式: ...

  9. 解决canvas图片getImageData,toDataURL跨域问题

    图片服务器需要配置Access-Control-Allow-Origin 当需要需要对canvas图片进行getImageData()或toDataURL()操作的时候,跨域问题就出来了.图片服务器需 ...

  10. npm run build后如何打开index.html跑起项目

    Tip: built files are meant to be served over an HTTP server.   Opening index.html over file:// won't ...