目前有两种方法实现移动端的复制,且目前这两种方法只在移动端试验过,PC端的支持情况还不是很清楚。
1. 使用clipboard插件
step1:引入插件
<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对象
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, // 当前触发事件的对象,可修改其属性
}
2. 使用select()和execCommand执行copy
HTML:
<p>
<span>微信号</span>
<textarea id="copyWechat" row="1" readonly="readonly" style="resize:none; padding:0; border:0">wechatno</textarea>
</p>
javaScript
document.getElementById("copyWechat").select();
document.execCommand("copy", false, null);
此种方式的弊端:
(1)在Android端可支持,但是在iOS上,并没有复制到内容,至于为什么没有复制到内容,暂时还没找到原因;
(2)只能支持在input和textarea中复制,因为select()方法支持input和textarea,样式上调节起来较费劲,没有第一种方法好用。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。