html5页面如何实现点击复制的功能
发布时间： 2020-09-22 11:07:18
来源：亿速云
阅读： 136
作者： ctdmz
这篇文章主要介绍了html5页面如何实现点击复制的功能，有一定的参考价值，需要的朋友可以参考。 希望大家看完这篇文章后，大有收获。 接下来就让编辑带大家一起理解吧。
在实际工作中，有时会遇到这样的需求。 页面上有链接。 无需选择链接内容，只需单击复制按钮即可将链接内容复制到剪贴板。 在这种情况下，可以使用clipboard插件来实现。 以下是简单的demo。
首先，可以在npm install clipboard --save-dev中安装插件
clipboard示例将从属性复制到剪贴板-111
从其他元素复制内容222从其他元素复制内容
复制到剪切表-222
在JS中指定复制的内容被复制到剪切表-333
//从属性复制
var BTN=document.getelementbyid (BTN )；
varclipboard=newclipboard(BTN； //实例化
clipboard.on('success '，function(e ) (e ) )//复制成功的回调，选项
console.log(e )；
)；
clipboard.on('error '，function(e ) (e ) )//复制失败的回调，选项
console.log(e )；
)；
//从其他元素复制内容
var BTN2=document.getelementbyid (BTN2)；
var clipboard2=new clipboard (BTN2)； //实例化
clipboard2.on('success '，function(e ) )//复制成功的回调，选项
console.log(e )；
)；
clipboard2.on('error '，function(e ) )//复制失败的回调，选项
console.log(e )；
)；
用//JS指定要复印的内容
var BTN3=document.getelementbyid (BTN3)；
var clipboard3=new clipboard (BTN 3，{
text :函数() }
在return '333-JS中指定要复制的内容'；
}
)；
clipboard3.on('success '，function(e ) )//复制成功的回调，选项
console.log(e )；
)；
clipboard3.on('error '，function(e ) )//复制失败的回调，选项
console.log(e )；
)；