JS实现复制功能的三种方式，有坑

简介

业余时间写了一个在微信里面分享X宝优惠券的小工具，里面有用到复制淘口令的功能，当时以为实现起来很…简单，但是一不留神还是踩了个坑，接下来就给大家分享一下。

页面布局代码传送门：https://www.jianshu.com/p/fceec5bf1beb

第一种：浏览器Copy功能

HTML代码

<textarea cols="20" rows="10" id="tkl">
素乐小风扇usb便携式手持小型随身可充电学生宿舍女桌面办公室桌上手拿握迷你电小米大风力超静音n9儿童电扇
【在售价】48
【券后价】38.00
【返红包】0.33
--------------------
【领券下单】复制￥1ikI1q4OnJk￥打开手机淘宝领券并下单</textarea>
<input type="button" onClick="copyTkl()" value="立即领券" />

JS代码

<script type="text/javascript">
function copyTkl() {var tkl=document.getElementById("tkl");tkl.select(); document.execCommand("Copy"); alert("复制淘口令成功......");
}
</script>

原理：

获取textarea文本域数据
选中复制对象
执行浏览器复制命令

在微信开发工具里面一切正常，但是在真机使用时iphone 有些机型不能复制到数据。
现象之一：iphone X第一次打开页面复制正常，但是同一个页面第二次及以后就不能再复制到数据。

第二种：clipboard.js

下载地址：https://github.com/zenorocha/clipboard.js/archive/master.zip

HTML代码

 <input type="text" id="tkl" /><button type="button" id="copyTkl">立即领券</button>

JS代码

<!--引入插件-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>
<script type="text/javascript">
$('#copy').on('click', function () {var value = $('#copyTkl').val();$('#copyTkl').attr('data-clipboard-text', value);var clipboard = new Clipboard('#copyTkl');clipboard.on('success', function (e) {alert("复制淘口令成功......");});clipboard.on('error', function (e) {alert("复制淘口令失败......");});
})
</script>

浏览器支持

Chrome 42 +
Edge12 +
Firefox 41 +
IE 9 +
Opera 29 +
Safari 10 +

使用总结：PC上基本可以畅通无阻，移动端要改源码，在实现过程中还解决了一系列问题，例如：动态数据复制、div换button 、和项目中本身代码的禁用事件冲突等，并且还要做机型适配。

第三种：纯JS，对第一种进行改进

网上有很多的例子，总结起来就两种：1、clipboard.js 2、纯JS 经过取舍clipboard.js放弃，因为不确定因素太多。那么就修改第一种方法的实现。

JS代码

function copyTkl() {const range = document.createRange();range.selectNode(document.getElementById('tkl'));const selection = window.getSelection();if (selection.rangeCount > 0) selection.removeAllRanges();selection.addRange(range);document.execCommand('copy');alert("复制淘口令成功......");
}

经测试，目前还没有发现问题，有兴趣的可以尝试一下！

JS实现复制功能的三种方式，有坑相关推荐

js声明变量的三种方式
JS 声明变量的三种方式 (1)使用变量步骤:a.声明-->b.赋值-->3.调用正确用法: <script type="text/javascript"> ...
java的如何创建js_[Java教程]JS创建事件的三种方式（实例）
[Java教程]JS创建事件的三种方式(实例) 0 2016-05-11 14:00:16 1.普通的定义方式 οnclick="Sfont=prompt('请在文本框中输入红色','红色' ...
原生JS事件绑定的三种方式
JavaScript绑定事件的方法要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定"事件处理函数".所谓事件处理函数,就是处理用户操作的函数,不同的 ...
js中弹框的三种方式
alert(),confirm(),prompt()三种弹框的区别 JS中有三种弹框,主要是window的方法来实现与用户交互. 下面我们看一下他们的具体样子和区别 1.alert()警告框主要是通 ...
js常见创建对象的三种方式
// 最常见的三种创建对象的方式// 1.字面量创建对象var o = {name:'jack'}// 2.通过Object创建对象var obj = new Object();obj.name = ...
深入理解pdf.js，PDFObject, iframe 三种方式来打开PDF文件的区别
浏览器原生就是支持打开PDF文件的. 所以使用iframe打开就相当于是使用浏览器自带的PDF插件打开,这个很好理解. 至于PDFObject,他是借助了embed这个标签,这个标签是什么概念? HT ...
【JavaScript】原生js阻止事件的三种方式
三种阻止事件执行的方式 event.preventDefault() event.stopPropagation() return false 1.event.preventDefault() 阻止特 ...
JS中创建对象：三种方式（pink）
在 JavaScript 中,现阶段我们可以采用三种方式创建对象(object): (1)利用字面量创建对象 (2)利用new Object创建对象 (3)利用构造函数创建对象
js轮播（三种方式）
方式一 1.先将图片信息封装成一个数组的全局变量. 2.创建一个全局变量 i 用于操作数组的下标. 3.点击上.下一个按钮时,触发函数,使 i 自增或自减 4.通过字符串拼接的方式,拼接 url. j ...

JS实现复制功能的三种方式，有坑

简介

第一种：浏览器Copy功能

第二种：clipboard.js

第三种：纯JS，对第一种进行改进

JS实现复制功能的三种方式，有坑相关推荐

最新文章

热门文章