js实现复制粘贴的两种方法
本文实例为大家分享了js实现复制粘贴的具体代码，供大家参考，具体内容如下
一、前沿
界面需要复制功能，所以就写了一个作为简单记录
二、方法、推荐第二种。
1、第一种方法
1）、通过 document.execCommand('copy')
2）、前端代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>constructor-nodelist</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
</head>
<body>
<button class="copy_file" onclick="copyText('copy_file')">点我复制</button>
<a id="copy_file" href="复制内容" ></a>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
function copyText(str_file) {
const btn = document.querySelector('.'+str_file);
var copy_val = document.getElementById(str_file)
var copy_file = copy_val.getAttribute("href");
btn.addEventListener('click',() => {
const input = document.createElement('input');
document.body.appendChild(input);
input.setAttribute('value', copy_file);
input.select();
if (document.execCommand('copy')) {
document.execCommand('copy');
swal("复制成功！","success");
}
document.body.removeChild(input);
})
}
</script>
</body>
3）、总结：主要是通过 class和id 来复制 a标签中的 href，把复制好的内容放到 生成的input标签中，然后复制结束把 input标签给remove，这个你复制内容自行发挥，和修改 js。
4）、问题：第一次点击不生效，需要点击两次，暂时不解决
2、第二种方法
1）、通过 ClipboardJS 来实现 内容的复制，推荐这个
2）、git地址：clipboardjs
3）、前端代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 请自行去git项目下载 js-->
<script src="./clipboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
<button id="btn" data-clipboard-text="str_555" onclick="copyText()">
<span>Copy</span>
</button>
</body>
</html>
<script>
function copyText() {
var btn = document.getElementById('btn');
console.log(btn);
var clipboard = new ClipboardJS(btn);
<!-- var clipboard = new ClipboardJS(btn, {-->
<!-- container: document.getElementById('btn')-->
<!-- });--> 如果你的项目是 bootstrap框架，请使用这个
clipboard.on('success', function(e) {
console.log(e);
swal("复制成功！","success");
clipboard.destroy();
});
clipboard.on('error', function(e) {
console.log(e);
swal("复制失败","error");
clipboard.destroy();
});
}
</script>
3）、总结：请一定要仔细阅读 文档。这个项目还是非常强大的，强烈推荐这个。
4）、问题：也是遇到了 第一次复制不生效的问题，暂时不解决了。
三、总结
1、都遇到了 第一次复制不生效的问题，后续解决把，都采用了 sweetalert 。
2、个人都只在 谷歌和火狐浏览器实验了，都可以用，如果其他浏览器版本不能用，请自行查阅其他文章，欢迎沟通、指正。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JS input文本框禁用右键和复制粘贴功能的代码
复制代码 代码如下: function click(e) { if (document.all) { if (event.button==1||event.button==2||event.button==3) { oncontextmenu='return false'; } } if (document.layers) { if (e.which == 3) { oncontextmenu='return false'; } } } if (document.layers) { docume
-
JS插件clipboard.js实现一键复制粘贴功能
一键复制粘贴功能需要用到一个轻量级的JS插件:clipboard.js. 官网地址 下载到本地后,将其放入项目中,直接引用即可.具体实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一键复制粘贴</title> <style> .transfer { width: 90%; margin: 20px auto; fon
-
javascript复制粘贴与clipboardData的使用
window.clipboardData可以实现复制与粘贴的操作,它的getData 方法可以实现数据的读取,setData方法可以实现数据的设置 <script language="javascript"> function readTxt() { alert(window.clipboardData.getData("text")); } function setTxt() { var t=document.getElementById("
-
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
利用2个文件 ZeroClipboard.js ZeroClipboard.swf 复制代码 代码如下: <script type="text/javascript" src="ZeroClipboard.js"></script> <script language="JavaScript"> var clip = null; function $(id) { return document.getElemen
-
Clipboard.js 无需Flash的JavaScript复制粘贴库
clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能.可以在浏览器和 Node 环境中使用.支持 Chrome 42+.Firefox 41+.IE 9+.Opera 29+ 官方网站:https://github.com/zenorocha/clipboard.js 软件下载:http://www.jb51.net/jiaoben/385604.html 官方使用方法:https://zenorocha.github.io/clipbo
-
js实现复制粘贴的两种方法
本文实例为大家分享了js实现复制粘贴的具体代码,供大家参考,具体内容如下 一.前沿 界面需要复制功能,所以就写了一个作为简单记录 二.方法.推荐第二种. 1.第一种方法 1).通过 document.execCommand('copy') 2).前端代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>cons
-
JS获取地址栏参数的两种方法(简单实用)
js获取地址栏参数的方法有两种:第一种,采用正则表达式获取地址栏参数,第二种,是比较传统的方法,在这小编给大家强烈推荐使用第一种方法,既方便有实用,具体实现过程请看下文详述. 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window
-
浅析JS动态创建元素【两种方法】
前言: 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式 为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图 <div id="containe
-
JS动态创建元素的两种方法
本文为大家分享了js创建元素的两种方法供大家参考,具体内容如下 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式 为了更好的理解,设定一个应用场景. 随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图 <div
-
js动态拼接正则表达式的两种方法
方法一: 做项目的时候可能会遇到用js验证表单输入正确性的需求,这时候就需要用到js的正则表达式.举个例子:比如说要验证月份,格式为:'yyyy-MM',这个正则表达式写起来很简单,实在写不出,也可以Google.百度一把,网上例子一大堆!但是js正则表达式就这样写死也会带来新的问题:如果配置文件的月份格式改了呢?改成'yyyyMM'.或者是'yyyy_MM'...呢??我们是不是要记得去把js中的正则表达式也跟着一遍遍的改呢?? 这时候我们就要问了:怎样才能写出动态的正则表达式呢,修改了配置文
-
js获取地址栏参数的两种方法
项目中经常遇到获取上个页面跳转过来获取当前的参数 //获取地址栏参数,name:参数名称 function getUrlParms(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null) return unescape(r[2]); return n
-
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
获取页面中元素到文档区域document的横向.纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素
-
js读写cookie实现一个底部广告浮层效果的两种方法
下面一个案例使用js实现一个页面浮层效果,并且通过两种方法使用js读写cookie来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方式 复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
-
js判断字符是否是汉字的两种方法小结
有时需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到.用 Javascript 判断通常有两种方法. 1.用正则表达式判断 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xml
-
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单独打包出来.在不做任何配置,直接打包出来的css文件是压缩合并成了一个了,如下图,当我想要改某一个css文件时就不行了. 方法一: 1.在bulid文件夹下建一个copy.js(这个js名称可以自定义) 代码如下: var fs = require('fs'); var path = require