簡介
業餘時間寫了一個在微信裏面分享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("複製淘口令成功......");
}
經測試，目前還沒有發現問題，有興趣的可以嘗試一下！