标签:disabled only lin hidden 部分 copy 简单的 readonly 功能
一般那种活动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(‘复制失败,请长按复制‘); }); })
标签:disabled only lin hidden 部分 copy 简单的 readonly 功能
原文地址:https://www.cnblogs.com/leiting/p/11013379.html