ClipboardJS复制粘贴插件的使用
1、简单的纯JS复制粘贴(兼容性差,只能用textarea标签)
1 2 3 4 5 6 | var btn=document.getElementsByClassName( "btn" )[0]; //复制按钮 btn.onclick= function (){ var foo = document.getElementById( "foo" ); //要复制的节点,只能是textarea foo.select(); document.execCommand( "Copy" ); } |
2、ClipboardJS插件的使用
(一)简单的使用
1 2 3 4 | <textarea id= "foo" >123</textarea> //被复制对象 <button class = "btn" data-clipboard-target= "#foo" data-clipboard-action= "copy" >复制</button> //复制 new ClipboardJS( '.btn' ); |
(二)高级的使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | ClipboardJS.isSupported() //是否兼容 var clipboard = new ClipboardJS( '.btn' , { target: function (trigger) { return document.getElementById( "foo" ) //选择对象 } }); var clipboard = new ClipboardJS( '.btn' , { text: function (trigger) { return 123567; //复制内容 } }) clipboard.on( 'success' , function (e) { console.info( 'Action:' , e.action); //复制类型 console.info( 'Text:' , e.text); //复制文本 console.info( 'Trigger:' , e.trigger); //复制节点 e.clearSelection(); //取消选择节点 }); clipboard.on( 'error' , function (e) { console.error( 'Action:' , e.action); console.error( 'Trigger:' , e.trigger); }); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步