目前有兩種方法實現移動端的複製,且目前這兩種方法只在移動端試驗過,PC端的支持狀況還不是很清楚。javascript
step1:引入插件java
<script type="text/javascript" src="https://cdn.staticfile.org/clipboard.js/1.5.15/clipboard.min.js"></script>
step2: 編寫HTML,點擊button,一鍵粘貼微信
<button class="copyBtn" data-clipboard-text="輸入你想複製的內容">去粘貼</button>
step3:編寫JavaScript,實例化clipboard對象spa
var clipboard = new Clipboard('.copyBtn').on('success', function(e) { var e = e || window.event; console.log(e); // to do what you want }).on('error', function(e) {});
另外,step3中複製成功以後,打印的e對象以下:插件
e = { action:"copy", clearSelection: function(){}, // 清除已選中區域,可直接調用這個方法 text: "輸入你想複製的內容", // 你要複製的內容 trigger: button.copyBtn, // 當前觸發事件的對象,可修改其屬性 }
HTML:code
<p> <span>微信號</span> <textarea id="copyWechat" row="1" readonly="readonly" style="resize:none; padding:0; border:0">wechatno</textarea> </p>
javaScriptcdn
document.getElementById("copyWechat").select(); document.execCommand("copy", false, null);
此種方式的弊端:
(1)在Android端可支持,可是在iOS上,並無複製到內容,至於爲何沒有複製到內容,暫時還沒找到緣由;
(2)只能支持在input和textarea中複製,由於select()方法支持input和textarea,樣式上調節起來較費勁,沒有第一種方法好用。對象