当前位置：网站首页>Clipboard tutorial

Clipboard tutorial

2022-06-25 14:28:00 【Enlightened gentleman】

clipboard Is to achieve the function of copying text to the clipboard JavaScript plug-in unit , It is very convenient to realize the copy and cut function

Official website address ：https://clipboardjs.com/

1、 Copy

（1）、 Copy the contents of the input box

adopt data-clipboard-target Property to specify what to copy

adopt data-clipboard-action Property to perform the type of operation ,copy For replication

<!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"> The Yellow River is far above the white clouds </textarea>
			<button class="btn" data-clipboard-action="copy" data-clipboard-target="#bar">
			 Copy 
			</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>

Running effect

（2）、 Copy the specified value

In the structure ClipboardJS When , Specify the copied text

<!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">
			 Copy 
			</button>
			
			<br>
			
			<input style="width: 400px;" type="text" />
		</div>
		<script>
			var clipboard = new ClipboardJS('#copy', {
			    text: function(trigger) {
			        return ' Looking for the floor in front of the window , Plant a plum . The moon and the breeze I , The world of mortals will never 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>

Running effect

2、 shear

adopt data-clipboard-action Property to perform the type of operation ,cut To 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"> Outside the window, Yan Jiaoying is jealous . There is no evidence for the dream soul under the window . Dreams are good but often startled , Not to the depths of the clouds . No thread . No thread . Red heavy curtain of rain .</textarea>
			<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
			 shear 
			</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>

Running effect