js点击复制指定文本源码案例-js点击复制号码

e6zzseo

已于 2022-04-27 17:10:07 修改

阅读量607

点赞数

分类专栏： seo 文章标签： html5 js javascript seo

于 2022-04-27 17:03:01 首次发布

本文链接：https://blog.csdn.net/aqz022/article/details/124454473

版权

seo 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

js点击复制号码需求场景

在我们做seo优化时，需要做一落地页来转化用户。而简便的操作人性化的功能会对转化带来很大帮助。本文就来学习下怎么实现js点击复制指定文本（一般为社交号码），代替人工选择再复制操作，简单方便提升用户体验和转化。

js点击复制号码需求实现

这里我们用到的是clipboard.js静默复制js插件

clipboard.js是一款使用现代方法将文本复制到剪贴板的js插件，不使用flash，最小仅3kb。

clipboard.js案例1：单个复制

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>   
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  
  
    <title>单击复制按钮添加微信</title>    
</head>    
<body>微信号：<span id="target">e6zzseo</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
    点击复制    
</button>     
</body>    
<script>    
    $(document).ready(function(){       
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("复制成功，打开微信添加好友",1500); 
            window.location.href='weixin://';
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>    
</html>

clipboard.js案例2：多个复制

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
			一键复制粘贴
		</title>
		<style>
			.transfer { width: 90%; margin: 20px auto; font-size: 18px; } .transfer
			button { margin-top: -5px; float: right; margin-left: 10px; background-color:
			rgb(3, 169, 244); width: 30%; height: 25px; font-size: 14px; color: white;
			border: 0; border-radius: 8%; }
		</style>
	</head>
	<body>
		<div class="transfer">
			支付宝：
			<span id="zfb_account">
				e6zzseo
			</span>
			<button onclick="copy1()" data-clipboard-action="copy" data-clipboard-target="#zfb_account"
			id="copy_zfb">
				一键复制
			</button>
		</div>
		<div class="transfer">
			微信：
			<span id="wx_account">
				e6zzseo
			</span>
			<button onclick="copy2()" data-clipboard-action="copy" data-clipboard-target="#wx_account"
			id="copy_wx">
				一键复制
			</button>
		</div>
		<input type="text" />
	</body>
	<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js">
	</script>
	<script>
		function copy1() {
			var clipboard = new Clipboard('#copy_zfb');
			clipboard.on('success',
			function(e) {
				e.clearSelection(); //选中需要复制的内容
				alert("复制成功！");
			});
			clipboard.on('error',
			function(e) {
				alert("当前浏览器不支持此功能，请手动复制。")
			});
		}

		function copy2() {
			var clipboard = new Clipboard('#copy_wx');
			clipboard.on('success',
			function(e) {
				e.clearSelection(); //选中需要复制的内容
				alert("复制成功！");
			});
			clipboard.on('error',
			function(e) {
				alert("当前浏览器不支持此功能，请手动复制。")
			});
		}
	</script>
	</body>
</html>

e6zzseo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js点击复制指定文本源码案例-js点击复制号码

js点击复制号码需求场景在我们做seo优化时，需要做一落地页来转化用户。而简便的操作人性化的功能会对转化带来很大帮助。本文就来学习下怎么实现js点击复制指定文本（一般为社交号码），代替人工选择再复制操作，简单方便提升用户体验和转化。js点击复制号码需求实现这里我们用到的是clipboard.js静默复制js插件clipboard.js是一款使用现代方法将文本复制到剪贴板的js插件，不使用flash，最小仅3kb。clipboard.js案例1：单个复制<!DOC.
复制链接

扫一扫