clipboard.js 异步获取数据后复制内容

最新推荐文章于 2023-05-29 17:40:31 发布

下刀

最新推荐文章于 2023-05-29 17:40:31 发布

阅读量1.7k

点赞数 1

分类专栏：春种秋收文章标签： board.js 异步复制 board.js 复制异步数据

本文链接：https://blog.csdn.net/myboyxuao/article/details/100987231

版权

春种秋收专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目的：ajax 异步获取数据后，复制数据到系统剪贴板，运行之后，ctrl +V 就行了(提前先复制其他文字已区别);

代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>异步获取数据后</title>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
	<script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>  
</head>
<body>
<!--数据会默认从https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?--获取并复制，可提前先复制其他文字 ，查看是否生效> -->
 
 <div id="copyContext"   style="opacity: 0;" ></div>
 <!-- 需复制内容存储div  opacity: 0(默认copy 需可见 ，设置透明，display 不可用 ) -->
<button id="copy" data-clipboard-target="#copyContext" style="opacity: 0;" ></button><!-- 点击复制 -->
</body>
</html>
<script type="text/javascript">
	
	 
	function copp(){
			var clipboard = new ClipboardJS('#copy');
			clipboard.on('success', function (e) {
				console.info('Action:', e.action)//触发的动作/如：copy,cut等
				console.info('Text:', e.text);//触发的文本
				console.info('Trigger:', e.trigger);//触发的DOm元素
				e.clearSelection();//清除选中样式（蓝色）
			})
			clipboard.on('error', function (e) {
				console.error('Action:', e.action);
				console.error('Trigger:', e.trigger);
			});
	}
	
	
	function getData(){
			  $.getJSON("https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
				  console.log(data[0]);
				 $("#copyContext").html(data[0]); // 设置异步获取的值，添加到 copyTarget 的div 中
				 $('#copy').trigger("click");// 模拟点击事件 点击复制
					
		});
	}
	

	copp();// 初始化copy

	getData();// 异步获取数据

</script>

下刀

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
clipboard.js 异步获取数据后复制内容

目的：ajax 异步获取数据后，复制数据到系统剪贴板，运行之后，ctrl +V 就行了(提前先复制其他文字已区别);代码如下：<!DOCTYPE html><html><head> <title>异步获取数据后</title> <meta charset="utf-8"> <s...
复制链接

扫一扫

专栏目录