苹果手机复制和安卓复制功能实现

CSS

.layui-m-layer {
   position: relative;
   z-index: 19891014;
 }
.layui-m-layershade {
    background-color: rgba(0,0,0,.7);
    pointer-events: auto;
}
.layui-m-layermain, .layui-m-layershade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.description-content {
    color: #666;
}
.layui-m-layermain {
    display: table;
    font-family: Helvetica,arial,sans-serif;
    pointer-events: none;
}
.layui-m-layermain, .layui-m-layershade {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.layui-m-layermain .layui-m-layersection {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.layui-m-layer0 .layui-m-layerchild {
    width: 90%;
    max-width: 640px;
}
.layui-m-layerchild {
    position: relative;
    display: inline-block;
    text-align: left;
    background-color: #fff;
    font-size: 14px;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    pointer-events: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
}
.layui-m-layer * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.layui-m-layerbtn span, .layui-m-layerchild h3 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.layui-m-layerchild h3 {
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    font-size: 16px;
    font-weight: 400;
    border-radius: 5px 5px 0 0;
    text-align: center;
}
.layui-m-layercont {
    padding: 50px 30px;
    line-height: 22px;
    text-align: center;
}
.layui-m-layerbtn {
    display: box;
    display: -moz-box;
    display: -webkit-box;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 0;
    border-top: 1px solid #D0D0D0;
    background-color: #F2F2F2;
}
.layui-m-layerbtn, .layui-m-layerbtn span {
    position: relative;
    text-align: center;
    border-radius: 0 0 5px 5px;
}
.layui-m-layerbtn span[yes] {
    color: #40AFFE;
}

.layui-m-layer * {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
a:link, a:visited, ins {
    text-decoration: none;
}
.layui-btn {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    padding: 0 18px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
}
.layui-btn-warm {
    background-color: #FFB800;
}
.layui-m-layerbtn span {

    display: block;
    -moz-box-flex: 1;
    box-flex: 1;
    -webkit-box-flex: 1;
    font-size: 14px;
    cursor: pointer;

}

 

 

 

 

 

 

HTML

<div id="layui-m-layer0" class="layui-m-layer layui-m-layer0" style="display: none;" index="0"><div class="layui-m-layershade"></div><div class="layui-m-layermain"><div class="layui-m-layersection"><div class="layui-m-layerchild layui-m-layer-layui-layer-rim  layui-m-anim-up"><h3 style="background-color:#8DCE16; color:#fff;">温馨提示</h3><div class="layui-m-layercont"><div> <a href="tel:18331631035"><button type="button" class="layui-btn" id="dia_tel"><i class="layui-icon layui-icon-cellphone"></i> 拨打电话</button></a><button type="button" class="layui-btn layui-btn-warm" onclick="cpy()" id="btn_cpy"><i class="layui-icon layui-icon-login-wechat"></i>复制加好友</button></div></div><div class="layui-m-layerbtn"><span id="xinxioff" type="1" data-spm-anchor-id="181.7850105.0.i1">关闭</span></div></div></div></div></div>
<textarea id="tel_copy" style="visibility: visible;border: 0px; color: #FFFFFF;opacity: 0;" readonly="readonly">18331631035</textarea>
    <span id="data-copy"  style="-webkit-user-select: text;  background-color: #f2f3f4;color: #f2f3f4;opacity:0.1;">18331631035</span>

JS

 function cpy()
    {
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //ios
            var copyDOM = document.querySelector('#data-copy');  //要复制文字的节点
            var range = document.createRange();
            // 选中需要复制的节点
            range.selectNode(copyDOM);
            // 执行选中元素
            window.getSelection().addRange(range);
            // 执行 copy 操作
            var successful = document.execCommand('copy');
               alert("复制成功")
            return false;
        }


        var Url2=document.getElementById("tel_copy");
        Url2.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        alert("已复制好，可贴粘。");
    }
    $("#xinxioff").click(function() {
        $("#layui-m-layer0").hide();
    })