簡介
業(yè)余時間寫了一個在微信里面分享X寶優(yōu)惠券的小工具，里面有用到復(fù)制淘口令的功能轧钓，當(dāng)時以為實現(xiàn)起來很......簡單序厉，但是一不留神還是踩了個坑，接下來就給大家分享一下毕箍。
實現(xiàn)效果
- 頁面布局代碼傳送門：http://www.reibang.com/p/fceec5bf1beb
第一種：瀏覽器Copy功能
HTML代碼
<textarea cols="20" rows="10" id="tkl">
素樂小風(fēng)扇usb便攜式手持小型隨身可充電學(xué)生宿舍女桌面辦公室桌上手拿握迷你電小米大風(fēng)力超靜音n9兒童電扇
【在售價】48
【券后價】38.00
【返紅包】0.33
--------------------
【領(lǐng)券下單】復(fù)制￥1ikI1q4OnJk￥打開手機淘寶領(lǐng)券并下單</textarea>
<input type="button" onClick="copyTkl()" value="立即領(lǐng)券" />
JS代碼
<script type="text/javascript">
function copyTkl() {
var tkl=document.getElementById("tkl");
tkl.select();
document.execCommand("Copy");
alert("復(fù)制淘口令成功......");
}
</script>
原理：
- 獲取textarea文本域數(shù)據(jù)
- 選中復(fù)制對象
- 執(zhí)行瀏覽器復(fù)制命令
在微信開發(fā)工具里面一切正常弛房，但是在真機使用時iphone 有些機型不能復(fù)制到數(shù)據(jù)。
現(xiàn)象之一：iphone X第一次打開頁面復(fù)制正常而柑，但是同一個頁面第二次及以后就不能再復(fù)制到數(shù)據(jù)文捶。
第二種：clipboard.js
下載地址：https://github.com/zenorocha/clipboard.js/archive/master.zip
HTML代碼
<input type="text" id="tkl" />
<button type="button" id="copyTkl">立即領(lǐng)券</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("復(fù)制淘口令成功......");
});
clipboard.on('error', function (e) {
alert("復(fù)制淘口令失敗......");
});
})
</script>
參數(shù)說明
瀏覽器支持
- Chrome 42 +
- Edge12 +
- Firefox 41 +
- IE 9 +
- Opera 29 +
- Safari 10 +
使用總結(jié)：PC上基本可以暢通無阻，移動端要改源碼媒咳，在實現(xiàn)過程中還解決了一系列問題粹排，例如：動態(tài)數(shù)據(jù)復(fù)制、div換button 涩澡、和項目中本身代碼的禁用事件沖突等顽耳，并且還要做機型適配。
第三種：純JS，對第一種進行改進
網(wǎng)上有很多的例子射富，總結(jié)起來就兩種：1膝迎、clipboard.js 2、純JS 經(jīng)過取舍clipboard.js放棄胰耗，因為不確定因素太多弄抬。那么就修改第一種方法的實現(xiàn)。
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("復(fù)制淘口令成功......");
}
經(jīng)測試宪郊，目前還沒有發(fā)現(xiàn)問題掂恕，有興趣的可以嘗試一下！
