html剪切板功能实现

最新推荐文章于 2024-09-28 14:09:02 发布

忆成风

最新推荐文章于 2024-09-28 14:09:02 发布

阅读量2.5k

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/lhzau1996/article/details/93199928

版权

html 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>剪切板功能</title>
		<script type="text/javascript" src="js/clipboard.js"></script>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		</style>
	</head>
		<input id = "one" type = "text" value="one"/>
		<!--action定义为copy为复制功能-->
		<button class="one" data-clipboard-action = "copy" data-clipboard-target = "#one">一</button><p></p>
		
		<!--action定义为cut为剪切功能-->
		<textarea id = "two">two</textarea>
		<button class="two" data-clipboard-action = "cut" data-clipboard-target = "#two">二</button><p></p>
		
		<!--取span标签内容值-->
		<span>three</span>
		<button class="three" data-clipboard-action = "copy" data-clipboard-target = "span">三</button><p></p>
		
		<!--返回指定值给剪切板-->
		<button class="four">四</button><p></p>
		
		<div>five</div>
		<button class="five">五</button><p></p>
		
		<button class="six" data-clipboard-text = "6">六</button><p></p>
		<button class="six" data-clipboard-text = "66">六</button><p></p>
		<button class="six" data-clipboard-text = "666">六</button><p></p>
		
		<button data-clipboard-text = "7">七</button><p></p>
		<button data-clipboard-text = "77">七</button><p></p>
		<button data-clipboard-text = "777">七</button><p></p>
	<body>
	
	</body>
	<script>
	var clipboardOne = new Clipboard(".one");
    //复制成功时的处理
	clipboardOne.on('success',function(e){
		console.log(e);
	})
	//复制失败时的处理
	clipboardOne.on('error',function(e){
		console.log(e);
	})
	
	var clipboardTwo = new Clipboard(".two");
    //复制成功时的处理
	clipboardTwo.on('success',function(e){
		console.log(e);
	})
	
	var clipboardThree = new Clipboard(".three");
	clipboardThree.on('success',function(e){
		console.log(e);
	})
	
	var clipboardFour = new Clipboard(".four",{
		text:function(){
			return 'four';
		}
	});
	clipboardFour.on('success',function(e){
		console.log(e);
	})
	
	var clipboardFive = new Clipboard(".five",{
		target:function(){
			//选中div标签
			return document.querySelector('div');
		}
	});
	clipboardFive.on('success',function(e){
		console.log(e);
	})
	
	var clipboardSix = new Clipboard(".six");
	clipboardSix.on('success',function(e){
		console.log(e);
	})
	
	var btns = document.querySelectorAll('button'); 
	var clipboardSeven = new Clipboard(btns);
	clipboardSeven.on('success',function(e){
		console.log(e);
	})
	</script>

</html>