首页 > 技术文章 > 点击复制带剪贴板

lf2019 2019-05-24 15:27 原文

1: 点击按钮获取input对象
解决方法:
如果使用的jquery,那么直接$("#textArea").select()选中的就是这个input对象
如果使用的zepto,上面的方法是获取到的zepto对象是不支持原生select()方法的,那么就使用原生的办法
var obj = document.getElementById("textAreas");
obj.select();

2: 然后复制到剪贴板
第一目前没有一个很完美的方法可以兼容各个浏览器和移动端,引用插件也是一样的。
查了半天最好的办法就是使用 document.execCommand("Copy")
兼容性是不错的:
手机安卓支持到4.1、各种浏览器是可以的,但是唯独ios是不支持的,来给我把刀,ios你这玩意你限制是干什么?是要保护手机安全还是咋的。
所以只是pc端 使用那么就下面几行代码就可以搞定了:

 

如果是移动端 的话,就要兼容IOS,但是依然在iPhone5的10.2的系统中,依然显示复制失败,由于用户使用率较低,兼容就做到这里,那些用户你们就自己手动复制吧。
下面的两种方法都可以进行复制,因为核心代码就那么几行,先来简单的:

 

下面是一个比较完整的升级版方法,和插件Clipboard.js一样,不过代码不多,就直接拿来用好了。
这个获取的不是input对象,而是需要复制的内容。

 

 

推荐阅读