前端复制粘贴功能,html5实现复制粘贴
本文操作环境：windows7系统、javascript1.8.5版、戴尔自交第三代电脑。
javaScript怎么实现复制粘贴功能？
js实现复制粘贴的两种方法
一、前言
界面需要复制功能，所以就写了一个作为简单记录
二、方法、推荐第二种。
1、第一种方法
1)、通过document.execCommand(copy )
2)、前端代码如下：
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题构造函数-节点列表/标题
meta name= viewport content= width=device-width，initial-scale=1
link rel=样式表 href= https://cdn。bootcss。com/sweet alert/1。1 .3/甜蜜的警报。量滴CSS /
/头
身体
button onclick=复制文本( copy _ file )点我复制/按钮
a id=copy_file href=复制内容/a
脚本类型= text/JavaScript src= https://cdn。bootcss。com/sweet alert/1。1 .3/甜蜜的警报。量滴js /脚本
脚本
函数copyText(str_file) {
常量BTN=文档。查询选择器(“.”)str _ file)；
var copy _ val=document。getelementbyid(str _ file)
var副本文件=副本文件。get属性(“href”)；
btn.addEventListener(click ，()={
常量输入=文档。createelement(“input”)；
document.body.appendChild(输入);
input.setAttribute(value ，copy _ file)；
输入。select()；
如果(文档。执行命令( copy ){
文档。exec命令(“copy”)；
swal(复制成功!,成功);
}
document.body.removeChild(输入);
})
}
/脚本
/body3)，总结：主要是通过班级和编号来复制a标签中的href，把复制好的内容放到生成的投入标签中，然后复制结束把投入标签给移除，这个你复制内容自行发挥，和修改js。
4)、问题：第一次点击不生效，需要点击两次，暂时不解决
2、第二种方法
1)、通过剪贴板射流研究…来实现内容的复制，推荐这个
2)、git地址：剪贴板js(https://clipboardjs.com/)
3)、前端代码如下：
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
标题标题/标题
！-请自行去饭桶项目下载js -
脚本src= ./clipboard.min.js/script
link rel=样式表 href= https://cdn。bootcss。com/sweet alert/1。1 .3/甜蜜的警报。量滴CSS /
脚本类型= text/JavaScript src= https://cdn。bootcss。com/sweet alert/1。1 .3/甜蜜的警报。量滴js /脚本
/头
身体
button id= BTN data-clipboard-text= str _ 555 onclick= copy text()
跨度副本/span
/按钮
/body
/html
脚本
函数copyText() {
var BTN=文档。getelementbyid( BTN )；
控制台。日志(BTN)；
var clipboard=新剪贴板js(BTN)；
！-var clipboard=new clipboard js(BTN，{ -
！-容器：文件。getelementbyid( BTN )--
！- });-如果你的项目是引导程序框架，请使用这个
clipboard.on(成功，函数(e) {
控制台。日志(e)；
swal(复制成功!,成功);
剪贴板。destroy()；
});
clipboard.on(error ，函数(e) {
控制台。日志(e)；
swal(复制失败，错误);
剪贴板。destroy()；
});
}
/script3)，总结：请一定要仔细阅读文档。这个项目还是非常强大的，强烈推荐这个。
4)、问题：也是遇到了第一次复制不生效的问题，暂时不解决了。
三、总结
1、都遇到了第一次复制不生效的问题，后续解决把，都采用了甜蜜警报。
2、个人都只在谷歌和火狐浏览器实验了，都可以用，如果其他浏览器版本不能用，请自行查阅其他文章，欢迎沟通、指正。
推荐学习： 《javascript基础教程》 以上就是爪哇岛描述语言怎么实现复制粘贴功能的详细内容，更多请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。