clipboard 使用教程

最新推荐文章于 2023-08-28 14:48:38 发布

悟世君子

最新推荐文章于 2023-08-28 14:48:38 发布

阅读量5.7k

点赞数 5

分类专栏： javascript 文章标签：前端 javascript

本文链接：https://blog.csdn.net/wsjzzcbq/article/details/122045356

版权

javascript 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

clipboard 是实现复制文本到剪贴板功能的 JavaScript插件，实现复制剪切功能非常方便

官网地址：https://clipboardjs.com/

1、复制

（1）、复制输入框里的内容

通过 data-clipboard-target 属性指定复制的内容

通过 data-clipboard-action 属性执行操作的类型，copy 为复制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/clipboard.min.js" ></script>
	</head>
	<body>
		<div>
			<textarea id="bar">黄河远上白云间</textarea>
			<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
			复制
			</button>	
			
			<br>
			<input type="text" />
		</div>
		<script>
			var clipboard = new ClipboardJS('.btn');
			clipboard.on('success', function(e) {
			    console.info('Action:', e.action);
			    console.info('Text:', e.text);
			    console.info('Trigger:', e.trigger);
			
			    e.clearSelection();
			});

			clipboard.on('error', function(e) {
			    console.error('Action:', e.action);
			    console.error('Trigger:', e.trigger);
			});
		</script>
	</body>
</html>

运行效果

（2）、复制指定的值

在构造 ClipboardJS 的时候，指定复制的文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/clipboard.min.js" ></script>
	</head>
	<body>
		<div>
			<button id="copy">
			复制
			</button>
			
			<br>
			
			<input style="width: 400px;" type="text" />
		</div>
		<script>
			var clipboard = new ClipboardJS('#copy', {
			    text: function(trigger) {
			        return '窗前寻丈地，种得一株梅。明月清风我，红尘不复来。';
			    }
			});
			
			clipboard.on('success', function(e) {
			    console.info('Action:', e.action);
			    console.info('Text:', e.text);
			    console.info('Trigger:', e.trigger);
			    e.clearSelection();
			});

			clipboard.on('error', function(e) {
			    console.error('Action:', e.action);
			    console.error('Trigger:', e.trigger);
			});
		</script>
	</body>
</html>

运行效果

2、剪切

通过 data-clipboard-action 属性执行操作的类型，cut 为剪切

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/clipboard.min.js" ></script>
	</head>
	<body>
		<div>
			<textarea id="bar">窗外燕娇莺妒。窗下梦魂无据。梦好却频惊，不到彩云深处。无绪。无绪。红重一帘花雨。</textarea>
			<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
			剪切
			</button>	
			
			<br>
			<input style="width: 580px;" type="text" />
		</div>
		<script>
			var clipboard = new ClipboardJS('.btn');
			clipboard.on('success', function(e) {
			    console.info('Action:', e.action);
			    console.info('Text:', e.text);
			    console.info('Trigger:', e.trigger);
			
			    e.clearSelection();
			});

			clipboard.on('error', function(e) {
			    console.error('Action:', e.action);
			    console.error('Trigger:', e.trigger);
			});
		</script>
	</body>
</html>

运行效果

至此完

悟世君子

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
打赏
15
评论
clipboard 使用教程

clipboard 是实现复制文本到剪贴板功能的JavaScript插件，实现复制剪切功能非常方便官网地址：https://clipboardjs.com/1、复制（1）、复制输入框里的内容通过data-clipboard-target 属性指定复制的内容通过data-clipboard-action 属性执行操作的类型，copy 为复制<!DOCTYPE html><html> <head> <meta charset=...
复制链接

扫一扫