美文网首页
兼容Android和iOS复制到剪切板

兼容Android和iOS复制到剪切板

作者: zzj_alpaca | 来源:发表于2017-10-12 10:42 被阅读0次
    if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //区分iPhone设备  
              window.getSelection().removeAllRanges(); //这段代码必须放在前面否则无效  
              var Url2 = document.getElementById("biaoios"); //要复制文字的节点  
              var range = document.createRange();
              // 选中需要复制的节点  
              range.selectNode(Url2);
              // 执行选中元素  
              window.getSelection().addRange(range);
              // 执行 copy 操作  
              var successful = document.execCommand('copy');
    
              // 移除选中的元素  
              window.getSelection().removeAllRanges();
            } else {
              var save = function (e) {
                e.clipboardData.setData('text/plain', _this.yaoqingma);
                e.preventDefault();
              }
              document.addEventListener('copy', save);
              document.execCommand('copy');
              document.removeEventListener('copy', save);
            }
    //复制 按钮显示消失
            $('.copy_success').css('display', 'block');
            setTimeout(function () {
              $('.copy_success').css('display', 'none');
            }, 800);
    

    复制按钮效果

    .copy_success {
        width: 280px;
        height: 80px;
        background: #000;
        opacity: 0.5;
        font-size: 24px;
        text-align: center;
        color: #fff;
        line-height: 80px;
        border-radius: 20px;
        position: absolute;
        left: 50%;
        margin-left: -140px;
        bottom: 180px;
        display: none;
      }
    
    

    相关文章

      网友评论

          本文标题:兼容Android和iOS复制到剪切板

          本文链接:https://www.haomeiwen.com/subject/smenyxtx.html