美文网首页
ios实现点击复制文字到剪贴板

ios实现点击复制文字到剪贴板

作者: 路漫漫其修远兮Wzt | 来源:发表于2017-11-23 22:25 被阅读18次

    参考网址: http://blog.csdn.net/u010394015/article/details/54943908
    移动端点击复制文字到剪贴板:
    html代码:

    <span id="data">复制我到剪贴板</span>  
    <button class="button" type="button" id="button">点击复制</button> 
    

    复制文字的代码需要放在点击事件中
    js代码:

    $("#button").click(function(){  
            if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //ios  
                var copyDOM = document.querySelector('#data');  //要复制文字的节点    
                var range = document.createRange();      
                // 选中需要复制的节点    
                range.selectNode(copyDOM);    
                // 执行选中元素    
                window.getSelection().addRange(range);    
                // 执行 copy 操作    
                var successful = document.execCommand('copy');      
                try {      
                    var msg = successful ? 'successful' : 'unsuccessful';   
                      
                    console.log('copy is' + msg);      
                } catch(err) {      
                    console.log('Oops, unable to copy');      
                }    
                // 移除选中的元素    
                window.getSelection().removeAllRanges();    
            }else{  
                  
                console.log("android不支持此方式复制")  
            }  
        });  
    

    注意:这个方法在ios中有效,android中不起作用。另外,如果ios中不奏效,请检查css中
    {-webkit-user-select: text; }
    -webkit-user-select属性是否为text,为none会导致复制失败。

    有兼容性更好的方式,还望告知。

    相关文章

      网友评论

          本文标题:ios实现点击复制文字到剪贴板

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