JS实现点击复制功能(完美解决移动端可用)
先看一下效果图
使用此方法不需要转换什么<p>标签,直接就使用<textarea>标签,就是把它的样式修改了一下,将背景和边框都改为你要的颜色就可以了
上代码:
//Html
<div id="code">
<p class="main-yCode">你的邀请码</p>
<textarea id="copycode" class="main-code" readonly="readonly"> </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;
}
深圳的加一下群吧,一起交流,面试内推线下活动等等
最后分享一个公众号二维码,写一些散文和影评等,欢迎关注。