JS实现点击复制功能(完美解决移动端可用)

版权声明: https://blog.csdn.net/caoyan0829/article/details/84316344

先看一下效果图

使用此方法不需要转换什么<p>标签,直接就使用<textarea>标签,就是把它的样式修改了一下,将背景和边框都改为你要的颜色就可以了

上代码:

//Html
<div id="code">
	<p class="main-yCode">你的邀请码</p>
	<textarea id="copycode" class="main-code" readonly="readonly">&nbsp;</textarea>
	<div class="main-btn">
		<button onClick="copyCode()">复制</button>
	</div>
</div>


//Js
function copyCode(){
	var copycode=document.getElementById("copycode");
	copycode.select(); // 选择对象
	document.execCommand("Copy"); // 执行浏览器复制命令
	alert("已复制好,可贴粘。")
}


//Css
.main-yCode {
	text-align: center;
	font-size: 16px;
	margin-top: 20px;
}
.main-code {
	text-align: center;
	font-size: 24px;
	margin-top: 20px;
	width: 100%;
	height: 40px;
	background: white;
	border: white;
	outline: none;
}
.main-btn {
	margin-top: 20px;
	text-align: center;
	font-size: 16px;
}
.main-btn button{
	color: white;
	background: blue;
	width: 70px;
	height: 24px;
}

深圳的加一下群吧,一起交流,面试内推线下活动等等

最后分享一个公众号二维码,写一些散文和影评等,欢迎关注。

猜你喜欢

转载自blog.csdn.net/caoyan0829/article/details/84316344