一般那种活动H5分享可能会用到点击复制文字到剪贴板,很简单的功能

于是搜了一搜:js复制文字到剪贴板,可用结果大致分为两类:

一类是js原生方法,这种方法兼容性不好,不兼容ios;

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

另外,还有一些坑要注意

input/textarea为disabled不可用(readonly可以)

input/textarea为hidden不可用

try{

var copy = document.execCommand('copy');

  if(copy){
alert('复制成功!')
}else{
alert('复制失败,请长按复制!')
} }catch(e){
console.log(e)
}

另一类是插件:主要提到的插件是 clipboard.js 插件,轻便,兼容高版本浏览器,目前大部分安卓ios都支持

这个插件也有一些坑要注意

点击复制,加了个阻止冒泡事件之后这个就怎么也不管用了。。去掉之后就好了,神奇。。mark下~有空看下clipboard的实现原理

import ClipboardJS from 'clipboard'

var clipboard = new ClipboardJS('.link-box-textarea');
$(document).on('click', '.link-box-textarea', function (e) { // 点击复制到剪贴板
clipboard.on('success', function (e) {
alert('复制成功!');
}); // 如果复制失败就把只读属性去掉,让他自己长按复制
clipboard.on('error', function (e) {
$('.link-box-textarea').removeAttr('readonly');
alert('复制失败,请长按复制');
}); })

点击复制文字到剪贴板兼容性安卓ios的更多相关文章

  1. Zclip点击复制内容到剪贴板兼容各浏览器

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...

  2. 使用js 复制 文字到剪贴板

    有一个好插件 https://clipboardjs.com/ 兼容性  IE9+ 一般基本够用,但如果非要兼容IE8 可使用IE 特有的 方法 window.clipboardData.setDat ...

  3. js 点击复制文字

    复制input里面的文字 html: <input id="content" class="form-control" type="text&q ...

  4. Unity3D-实现连续点击两次返回键退出游戏(安卓/IOS)

    Unity3D-连续点击两次返回键退出游戏 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 Count ...

  5. JS 点击复制按钮 将文字复制到手机剪贴板

    我们在制作移动端网页的时候,经常会遇到这样一个问题,如何点击一个"复制"按钮,把一串文字复制到手机剪贴板,如上图所示. 看了网上的一些方法后,感觉那些方法都太复杂,有点要用插件,有 ...

  6. JQuery实现复制数据到剪贴板之各种麻花与右键点击弹出选择菜单

    1.如果小伙伴们只是想实现点击某个按钮(通过click事件)实现复制功能. 那小哥哥我在这里推荐大家使用2个非常好用的插件 (1)clipboard.js:纯js插件,无需flash,相对来说更轻量级 ...

  7. JS 点击复制Copy插件--Zero Clipboard

    写博客就是一周工作中遇到哪些问题,一个优点就是能够进行一个总结,另外一个优点就是下次遇到相同的问题即使那你记不住,也能够翻看你的博客攻克了.相同也能够帮到别人遇到与你一样问题的人.或者别人有比你更好的 ...

  8. 【javascript】点击复制内容的实现

    各种站点有很多类似的代码,不过都是拿来即用,连个解释也没有.大概看了一下,现在主要使用的有两种办法: 1.documen.execCommand("Copy")或者window.c ...

  9. tmux复制到windows剪贴板/粘贴板的坑

    以下所有操作都是在windows下面用putty连接linux centos6的情景下. 一直很纳闷为什么在tmux模式下不能把复制到的文字放到系统的粘贴板里面呢?通过层层阻碍,终于找到了原因. 去掉 ...

随机推荐

  1. LOJ2401 JOISC2017 Dragon2 计算几何、线段树

    传送门 先考虑每一个攻击方的龙和被攻击方的龙可以与多少个被攻击方/攻击方的龙匹配. 对于攻击方的龙\(A\)和被攻击方的龙\(B\),在道路为线段\((C,D)\)的情况下,能够与下图位置的所有对应属 ...

  2. 对于解决VS2015启动界面卡在白屏的处理方法

    有时候会遇到这种情况,仅供参考 找到devenv.exe所在文件夹,按住Shift,在空白地方右键,选择“在此处打开命令窗口”,在打开的窗口中输入devenv /ResetSettings 重新设置V ...

  3. Q-Q图和P-P图

     一. QQ图      分位数图示法(Quantile Quantile Plot,简称 Q-Q 图)       统计学里Q-Q图(Q代表分位数)是一个概率图,用图形的方式比较两个概率分布,把他们 ...

  4. 2019 拼多多java面试笔试题 (含面试题解析)

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.拼多多等公司offer,岗位是Java后端开发,最终选择去了拼多多. 面试了很多家公司,感觉大部分公司考察的点都差 ...

  5. [SDOI2008]仪仗队(欧拉函数)

    题目 [SDOI2008]仪仗队 解析 这个题,我也不知道他们的soltion是怎么写的这么长的. 我们发现我们一次看一条直线上的第一个点,也就是说,若两个点斜率\(k=\frac{y}{x}\)相同 ...

  6. Java之路---Day06

    2019-10-20-23:13:52 目录内容: 1.Scanner类 2.匿名对象 3.Random类 4.对象数组 Scanner类 功能:实现键盘输入数据到程序中 使用步骤: 1.导包: im ...

  7. 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架

    Taro本身实现的情况类似于mpvue,mpvue的未来展望中也包含了支付宝小程序,现在的版本中,也可以使用不同的构建命令来构建出百度小程序的支持,如第10章所示,但是现在Taro先于mpvue实现了 ...

  8. SAP Hybris Commerce启用customer coupon的前提条件

    今天在工作中,我发现一个问题:在SAP帮助文档里,backoffice coupon 维护界面有个 Customer Assignment的区域: 而我工作的Hybris服务器上的backoffice ...

  9. nodejs SSL Error: CERT_UNTRUSTED while using npm command 错误

    SSH 使用错误,其实我们关掉HTTPS就好了 npm config set strict-ssl false 或者 npm config set registry="http://regi ...

  10. PHP实现微信对账单处理

    最近要做支付对账,即检查第三方支付与数据库中账单是否一一对应,涉及到微信对账单的处理,成功时,微信账单接口返回数据以文本表格的方式返回,第一行为表头,后面各行为对应的字段内容,字段内容跟查询订单或退款 ...