javascript：复制粘贴功能

Fish北冥

于 2024-05-17 18:01:59 发布

阅读量665

点赞数 18

分类专栏： JS 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qq_42400124/article/details/139009373

版权

JS 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

javascript：复制粘贴功能

效果展示：

javascritp复制粘贴

在这里插入图片描述

注：
第一种方式复制后页面中出现可编辑区域，介意的可以选择第二种方式

代码块：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.copymin{width: 500px;margin: 100px auto;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;justify-content: center;-webkit-justify-content: center;border: 1px solid #eee;box-sizing: border-box;padding: 20px;}
			.copymin p{font-size: 18px;margin-right: 10px;color: #333;}
			.copymin input{width: 120px;height: auto;background-color: transparent;border: none;outline: none;font-size: 18px;color: #333;}
			.copymin .more{display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;justify-content: center;-webkit-justify-content: center;width: 80px;height: 32px;text-decoration: none;background-color: #ebebeb;border-radius: 4px;margin-right: 10px;font-size: 14px;color: #333;}
			.copymin .more:last-child{margin-right: 0;}
			.copymin .more:hover{background-color: #00AEEF;color: #fff;}
		</style>
	</head>
	<body>
		<div class="copymin">
			<p>Id:</p>
			<input type="text" value="123546xxj" id="input" readonly/>
			<a class="more" href="javascript:;" onclick="copybt01()">复制01</a>
			<p>Id:</p>
			<input type="text" value="fdsfgdsad" readonly/>
			<a class="more" href="javascript:;" onclick="copybt02('fdsfgdsad')">复制02</a>
		</div>
		
		<script src="js/jquery.js"></script>
		<script>
			// copybt01
			function copybt01(){
				var obj = document.getElementById("input");
				obj.select();
				try{    //进行复制到剪切板
					if(document.execCommand("Copy","false",null)){      //如果复制成功
					  alert("复制成功！"); 
					  console.log('111')
					}else{      //如果复制失败
					  alert("复制错误！");
					}
				  }catch(err){    //如果报错
					alert("copy error！")
				  }
			};
			// copybt02
			function copybt02(content){
				const dom = document.createElement("input");
				dom.value = content;
				document.body.appendChild(dom);
				dom.select();
				document.execCommand("copy");
				document.body.removeChild(dom);
				try{    //进行复制到剪切板
					if(document.execCommand("Copy","false",null)){      //如果复制成功
					  alert("复制成功！"); 
					  console.log('111')
					}else{      //如果复制失败
					  alert("复制错误！");
					}
				  }catch(err){    //如果报错
					alert("copy error！")
				  }
			}
		</script>
		
	</body>
</html>